-3
Мне интересен эффект изображения на this website. В частности, как изображения «распутываются» слева направо, когда вы прокручиваете их.Image transform on view
Я сохранил сайт на своем рабочем столе и отрезал все ненужные CSS/Javascript/HTML. Я придумал это:
$.fn.is_on_screen = function(e) {
// e.prevenDefault();
var win = $(window);
//Object to Check
obj = $(this);
// return false;
//the top Scroll Position in the page
var scrollPosition = win.scrollTop();
//the end of the visible area in the page, starting from the scroll position
var visibleArea = parseInt(win.scrollTop() + win.height());
var vercible_height = win.height()/2;
//the end of the object to check
var objEndPos = parseInt(obj.offset().top + obj.outerHeight());
if (visibleArea >= objEndPos) {
if ($('body').hasClass('clicked')) {
if (!(obj.hasClass('inner-box'))) {
obj.addClass('inner-box');
obj.width('100%');
}
}
}
};
$(document).ready(function() {
if ($('.inner-box').length > 0) {
$('.inner-box').removeClass('inner-box');
}
$(window).scrollTop(0);
left_nav_click();
find_active_contnt();
onScroll();
});
$(window).on('load', function() {
manage_height();
});
$(document).on("scroll", function() {
onScroll();
find_on_scroll()
});
function left_nav_click() {
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
// $(document).off("scroll");
$('a').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top + 2
}, 600, 'swing', function() {
// window.location.hash = target;
$(document).on("scroll", onScroll);
find_active_contnt();
});
});
}
function onScroll(event) {
var counter = 0;
var scrollPos = $(document).scrollTop();
/* if (counter <= 10) {
manage_height();
}
counter += 1;*/
$('#menu a').each(function() {
var currLink = $(this);
//if(currLink.attr("href") != '#home'){
var refElement = $(currLink.attr("href"));
if (refElement.length > 0) {
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
if (currLink.attr("href") == '#home') {
$('#fd').hide();
} else {
$('#fd').show();
}
$('#menu ul li a').removeClass("active");
currLink.addClass("active");
//var new_text = currLink.text();
var new_text = currLink.data('text');
$('#fd').find('.text-change').children('span').text(new_text);
} else {
currLink.removeClass("active");
}
}
});
}
function manage_height() {
if ($('.inner-img').length > 0) {
$('.inner-img').map(function() {
$(this).height($(this).children('img').height());
$(this).width('80%');
});
}
if ($('.buttons').length > 0) {
$('.buttons').map(function() {
$(this).width('80%');
});
}
}
function find_on_scroll() {
if ($('.inner-img').length > 0) {
$('.inner-img').map(function() {
$(this).is_on_screen();
});
}
if ($('.buttons').length > 0) {
$('.buttons').map(function() {
$(this).is_on_screen();
});
}
}
function find_active_contnt() {
var new_text = '';
$('#menu a').each(function() {
if ($(this).hasClass('active')) {
new_text = $(this).data('text');
}
});
$('#fd').find('.text-change').children('span').text(new_text);
}
(function($) {
$(function() {
var scroll = $(document).scrollTop();
var headerHeight = $('.nav-scroll .mob-head').outerHeight(true);
$(window).scroll(function() {
var scrolled = $(document).scrollTop();
if (scrolled > scroll) {
$('#sth').removeClass('time');
$('.nav-scroll').removeClass('fixed');
} else {
$('#sth').addClass('time');
$('.nav-scroll').addClass('fixed');
}
scroll = $(document).scrollTop();
});
});
})(jQuery);.image-sec ul li .inner{float:left;width:100%;transition:width 2s ease;-ms-transition:width 2s ease;-moz-transition:width 2s ease;-webkit-transition:width 2s ease;-o-transition:width 2s ease;background-size:cover;-o-background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;}
.image-sec ul li .inner.inner-box{width:100%;}
.inner-img{background-position:50% 50%;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;-ms-background-size:cover;width:100%;transition:all 2s ease;-ms-transition:all 2s ease;-moz-transition:all 2s ease;-webkit-transition:all 2s ease;-o-transition:all 2s ease;}
img.hidden-img{max-width:none;opacity:0;visibility:hidden;width:100%;}<!DOCTYPE html>
<!-- saved from url=(0023)http://thewhitwell.com/ -->
<html class="js csstransitions"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Whitwell</title>
<link href="css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-main.js"></script>
<script type="text/javascript" src="scroll-menu.js"></script>
</style></head>
<div class="mar wide mar-bottom">
<div class="inner-img inner-box" style="height: 800px; width: 100%; background-image: url("http://thewhitwell.com/images/uploads/ww-lobby.jpg");">
<img src="ww-lobby.jpg" class="hidden-img">
</div>
</div>
</body></html>
► Run code snippetCopy snippet to answer
Вы должны быть более четкими в вашем вопросе. –
Я не понимаю вашего заявления. Я думал, что я был очень ясен. Я хочу воспроизвести изображение «разгадать» эффект на веб-сайте примера. Но я не могу сделать это с кодом, который я предоставил. Как я могу быть более ясным? –