<div class="siema">
<div>Hi, I'm slide 1</div>
<div>Hi, I'm slide 2</div>
<div>Hi, I'm slide 3</div>
<div>Hi, I'm slide 4</div>
</div>position: absolute и прижата к верху top: 0.<header>
<section class="slider">
<div class="slider__slide"> <!-- тут текст и картинка--> </div>
<div class="slider__slide"> <!-- тут текст и картинка--> </div>
<div class="slider__slide"> <!-- тут текст и картинка--> </div>
....
</section>
<nav> <!-- тут меню --> </nav>
</header>header{
position: relative;
width: 100%;
height: 100vh;
}
.slider{
width: 100%;
height: 100%;
}
.slider__slide{
width: 100%;
height: 100%;
background: url() cover;
.....
}
nav{
position: absolute;
top: 0;
}// Пример с плагинов https://github.com/camwiegert/in-view
// Строки 10 - 14 в примере выше
inView('.newComment')
.on('enter', function(){
setTimeout(function() {
newComment.classList.remove('new');
}, 3000);
})
});first.addEventListener('change', function(e) {
....
});first.addEventListener('change', function(e) {
// this.value - значение первого select'а
second.querySelector('option[value=' + this.value + ']').selected = 'selected'
});chrome.downloads.download({url:url,filename:filename,saveAs: false},function() {
console.log(chrome.runtime.lastError);
});
console.log(li, "li"); // array of elements "li"
for (var i = li.length - 1; i >= 0; i--) {
console.log(li[i], "li[i]"); // element with sequence number "i" in array "li"
console.log(li[i].getElementsByTagName('a'), "li[i].getElementsByTagName('a')"); // all <a> - elements in li[i]
console.log(li[i].getElementsByTagName('a')[0], "li[i].getElementsByTagName('a')[0]"); // first <a> - element in li[i]
let a = li[i].getElementsByTagName('a')[0];
}.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);
};
};h = document.getElementById('A').clientHeight ||
h = document.getElementById('A').offsetHeight ||
h = document.getElementById('A').scrollHeight ||t = window.pageYOffset
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>const http = require('http');
const fs = require('fs');
http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'video/mp4'});
var rs = fs.createReadStream('video.mp4');
rs.pipe(res);
}).listen(8080);var newArr = arr.filter( function(i) {if(i!==8) return i} );
// или arr = arr.filter( function(i) {if(i!==8) return i} );
console.log(newArr); // [20, 60, 40]const loader = PIXI.loader;
loader
.add('first', '1.jpg')
.add('second', '2.jpg');
loader.load((loader, resources) => {
let scene = new PIXI.Container();
let bg = new PIXI.Sprite(resources.first.texture);
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.position.x = renderer.width / 2;
bg.position.y = renderer.height / 2;
scene.addChild(bg);
renderer.render(scene);
}
const popup = document.querySelectorAll('.popup');
let counter = 0;
setInterval(function() {
popup[counter].classList.remove('show');
counter++;
counter === popup.length ? counter = 0 : console.log('¯\\_(ツ)_/¯')
popup[counter].classList.add('show');
}, 1000)демонстрация мокапов, очень много изображений которые очень высокого разрешения для ретины
$( "#el" ).on( "swipeleft", fn );
$( "#el" ).on( "swiperight", fn );$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "active" );
});