Skip to content

Instantly share code, notes, and snippets.

<div class="loader">
<div class="loader-inner"></div>
</div>
.loader {
background: none repeat scroll 0 0 #ffffff;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
@AntonLitvin
AntonLitvin / parallax-translate3d.js
Last active May 7, 2017 10:38
Smooth Parallax Scroll
$(window).scroll(function() {
var st = $(this).scrollTop() /10;
$('.object').css({
'transform' : 'translate3d(0px, ' + st + '%, .01px)',
'-webkit-transform' : 'translate3d(0px, ' + st + '%, .01px)'
});
});
HTML:
<div class="wrapper">
<div class="tabs">
<span class="tab">Вкладка 1</span>
<span class="tab">Вкладка 2</span>
<span class="tab">Вкладка 3</span>
</div>
<div class="tab-content">
<div class="tab-item">Содержимое 1</div>
<div class="tab-item">Содержимое 2</div>
<a href="javascript:void(0);" class="toggle-btn hidden-lg"><span></span></a>
.toggle-btn {
display: block;
width: 28px;
height: 28px;
margin-top: 14px;
}
.toggle-btn span::after, .toggle-btn span::before {
content: "";
<div class="to-top"><i class="fa fa-angle-double-up"></i></div>
.to-top{
position: fixed;
right: 25px;
bottom: 25px;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
@AntonLitvin
AntonLitvin / fonts.js
Created April 25, 2017 11:04
WebFonts LocalStorage HTML5
<script id="webfont-localstorage-js">!function(){function e(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,n)}function t(e){return window.localStorage&&localStorage.font_css_cache&&localStorage.font_css_cache_file===e}function n(){if(window.localStorage&&window.XMLHttpRequest)if(t(o))a(localStorage.font_css_cache);else{var n=new XMLHttpRequest;n.open("GET",o,!0),e(n,"load",function(){4===n.readyState&&(a(n.responseText),localStorage.font_css_cache=n.responseText,localStorage.font_css_cache_file=o)}),n.send()}else{var c=document.createElement("link");c.href=o,c.rel="stylesheet",c.type="text/css",document.getElementsByTagName("head")[0].appendChild(c),document.cookie="font_css_cache"}}function a(e){var t=document.createElement("style");t.innerHTML=e,document.getElementsByTagName("head")[0].appendChild(t)}var o="css/fonts.css";window.localStorage&&localStorage.font_css_cache||document.cookie.indexOf("font_css_cache")>-1?n():e(window,"load",n)}();</script>
@AntonLitvin
AntonLitvin / stopdrag.js
Created April 25, 2017 11:05
jQuery Stop Draggable Elements
$('img').on('dragstart', function(event) { event.preventDefault(); });
<form>
<!-- Hidden Required Fields -->
<input type="hidden" name="project_name" value="Site Name">
<!-- <input type="hidden" name="admin_email" value="admin@mail.com"> -->
<input type="hidden" name="form_subject" value="Form Subject">
<!-- END Hidden Required Fields -->
<input type="text" name="name" placeholder="You name..." required><br>
<input type="text" name="email" placeholder="You E-mail..." required><br>
<input type="text" name="phone" placeholder="You phone..."><br>
@AntonLitvin
AntonLitvin / svgdraw.js
Created April 25, 2017 11:53
SVG Animate
var path = document.querySelector('path');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
// Оверлей поверх карт, чтобы они не масштабировались при прокрутке сайта
<div class="map-container">
<!-- Включение гугл карты по клику -->
<div class="map-overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://тут карта"></iframe>
</div>
// или так jQuery
$(function(){
$('.map-overlay').on('click', function() {