Мы имеем следующее, экран который встречает пользователя единажды при заходе на сайт который реализован следующим образом:
var timeout_id = 0,
hold_time = 1000,
holdOnStart = $('.holdOnStart');
holdOnStart.mousedown(function() {
timeout_id = setTimeout(start_Session, hold_time);
}).bind('mouseup mouseleave', function() {
clearTimeout(timeout_id);
});
function start_Session() {
$('section.ready').addClass('animate-bg-starter');
$('.content-block a.holdOnStart').css({'background-position': '300%', 'padding' : '10px'});
var text = $('a.holdOnStart').text();
$('.content-block a.holdOnStart').text(text.replace('ЗАЖМИ ДЛЯ СТАРТА', 'ТОЧКА НЕВОЗВРАТА...'));
setTimeout(function() {
$('section.ready div.first-overlay h1').css({'transition' : '.25s', 'position' : 'relative', 'margin-top': '-100vh'});
$('section.ready div.first-overlay h2').css({'transition' : '.25s', 'position' : 'relative', 'margin-top' : '-100vh'});
$('section.ready div.social').css({'transition' : '.25s', 'position' : 'relative', 'margin-top' : '100vh'});
$('section.ready a.controller').css({'transition' : '.25s', 'position' : 'relative', 'margin-top' : '100vh'});
}, 1500);
setTimeout(function() { $('h4.timer').css({'display' : 'block', 'transition' : '.25s', 'opacity' : '0.5' }); }, 1600);
setTimeout(function() { $('section.ready').css({'opacity' : '0', 'transition' : '.5s'}); }, 5000);
setTimeout(function() { $('section.ready').css('display', 'none'); localStorage.setItem('dS', 1); }, 5500);
.addClass - дарует анимацию слайда фонов:
.animate-bg {
@-webkit-keyframes animate-bg {
0% {
background-image: url('../img/Start-Backgrounds/First.jpg');
}
5% {
background-image: url('../img/Start-Backgrounds/Two.jpg');
}
10% {
background-image: url('../img/Start-Backgrounds/Three.jpg');
}
15% {
background-image: url('../img/Start-Backgrounds/Four.jpg');
}
20% {
background-image: url('../img/Start-Backgrounds/Five.jpg');
}
25% {
background-image: url('../img/Start-Backgrounds/First.jpg');
}
30% {
background-image: url('../img/Start-Backgrounds/Two.jpg');
}
35% {
background-image: url('../img/Start-Backgrounds/Three.jpg');
}
40% {
background-image: url('../img/Start-Backgrounds/Four.jpg');
}
45% {
background-image: url('../img/Start-Backgrounds/Five.jpg');
}
50% {
background-image: url('../img/Start-Backgrounds/First.jpg');
}
55% {
background-image: url('../img/Start-Backgrounds/Two.jpg');
}
60% {
background-image: url('../img/Start-Backgrounds/Three.jpg');
}
65% {
background-image: url('../img/Start-Backgrounds/Four.jpg');
}
70% {
background-image: url('../img/Start-Backgrounds/Five.jpg');
}
75% {
background-image: url('../img/Start-Backgrounds/First.jpg');
}
80% {
background-image: url('../img/Start-Backgrounds/Two.jpg');
}
85% {
background-image: url('../img/Start-Backgrounds/Three.jpg');
}
90% {
background-image: url('../img/Start-Backgrounds/Four.jpg');
}
95% {
background-image: url('../img/Start-Backgrounds/Five.jpg');
}
100% {
background-image: url('../img/Start-Backgrounds/First.jpg');
}
}
Но тут незадача, фоны при активации не успевают загрузится и делают это по факту, 1-1.5с уходит на загрузку фонов и соответственно так быть не должно, как загружать эти изображения на страницу сразу при заходе на сайт? Так же заинтересован в общих советах по улучшению кода, указаниям на мои костыли, хочу "Как правильно". Спасибо!
У меня есть див, хочу сделать так, чтобы при нажатии на него появлялась полоска (hr), но выполнить это нужно так, чтобы полоска появлялась только...
Мне нужно, чтобы по клику текст копировался, но не выделялсяНе могу понять какой метод отвечает за выделение
У меня есть БД, в ней есть таблица запись, в самой таблице, есть колонка "Время" Как мне сделать, чтобы нельзя было добавить одитнаковое времяЯ...