// Пример с плагинов https://github.com/camwiegert/in-view
// Строки 10 - 14 в примере выше
inView('.newComment')
.on('enter', function(){
setTimeout(function() {
newComment.classList.remove('new');
}, 3000);
})
});
pointer-events: none;
когда он скрыт. Когда он появляется pointer-events: auto;
const images = document.querySelectorAll('img');
images.forEach(function(img){
// get image width: 'w' and height: 'h'
// get list-product-item__img width: containerW, height: containerH
// .....
const imgAspect = w/h;
const containerAspect = containerW/containerH;
if (containerAspect>imgAspect) {
// set image width and height
img.style.width = containerW;
img.style.height = containerW / imgAspect;
} else {
// set image width and height
img.style.height = containerH;
img.style.width = containerH * imgAspect;
}
})
.image{
/* ваши стили */
/* сдвигаем на 100px вниз и задаем прозрачность 0*/
transform: translate3d(0, 100px, 0);
opacity: 0;
/* ******* */
transition: opacity .3s, transform .3s;
}
.image.is-shown{
/* возвращаем в обычное состояние */
transform: translate3d(0, 0px, 0);
opacity: 1;
}
const image = document.getElementById('image');
const imageFromTop = image.getBoundingClientRect().top;
const showOnScroll = debounce(function() {
// How much scroll from top
let scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
// Check scroll position
if (imageFromTop < scrollTop + 500) {
image.classList.add('is-shown')
// Remove this listener for better pref
window.removeEventListener('scroll', showOnScroll, false);
}
}, 30);
window.addEventListener('scroll', showOnScroll, false);
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
.cv-image {
position: relative
}
.img1,
.img2 {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
const el = document.getElementById('image');
const divOffset = offset(el);
window.onscroll = stay;
function stay() {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
el.style.top = divOffset.top + scrollTop + 'px'
}
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
.logo {
background: #000;
/* width: 42px; удалить*/
height: 42px;
display: inline-block;
margin-top: 14px;
}
transform: skewY(20deg)
вполне справляется с этой задачей + поддержка браузерами есть + адаптивность решается % величинами@font-face {
font-family: 'fira_sans';
src: url('firasansbold.eot');
src: url('firasansbold.eot?#iefix') format('embedded-opentype'),
url('firasansbold.woff2') format('woff2'),
url('firasansbold.woff') format('woff'),
url('firasansbold.ttf') format('truetype'),
url('firasansbold.svg#fira_sansbold') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'fira_sans';
src: url('firasansregular.eot');
src: url('firasansregular.eot?#iefix') format('embedded-opentype'),
url('firasansregular.woff2') format('woff2'),
url('firasansregular.woff') format('woff'),
url('firasansregular.ttf') format('truetype'),
url('firasansregular.svg#fira_sansregular') format('svg');
font-weight: 400;
font-style: normal;
}
*{
font-family: "fira_sans";
}
.bold{
font-weight: 700
}
.normal{
font-weight: 400
}
$( "#el" ).on( "swipeleft", fn );
$( "#el" ).on( "swiperight", fn );
$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "active" );
});
var auto = $.jqwidont.auto(); // is automatic initialisation enabled?
$.jqwidont.auto(false); // disable it
$.jqwidont.init(); // perform the default behaviour
$('p').widont();
var string = $.jqwidont.transform('No widows here!'); // string = 'No widows here!'
<svg>
<defs>
<clipPath id="clipping">
<polygon points="98.4999978 153.75..."/> // ваша маска
</clipPath>
</defs>
</svg>
.item {
clip-path: url(#clipping);
}