On my website is a fixed image. This image should be "animated", meaning that the single frames of the animation should be iterated. So the idea is to have an array of images and that every time the user scrolls, the array is iterated and the displayed image changes, thus creating an animation.
I'm not that accustomed to using JS, thus I don't really know where to start.
The only thing I have is the CSS:
#animation {
background-repeat: no-repeat;
position : fixed;
width: 980px;
margin: 0 auto;
}
Ok, I've created example for fixed number of images that will be used in "movie/animation". In this case, the number is 5. Script will get image of site's height and whole animation (5 frames) will have lenght of site's lenght. I've preloaded and hide images that will be used in animation just to make sure that animation will work smooth.
HTML
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/>
<!-- Next image is used for first frame, before scroll -->
<img src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg" id="animation" />
<div id="bottommark"></div>
CSS
.hidden {
position: absolute;
top: -9999999px;
}
#bottommark {
position: absolute;
bottom: 0;
}
#animation {
background-repeat: no-repeat;
position : fixed;
top: 0;
width: 980px;
margin: 0 auto;
}
body, html {
height: 1000px; /* just for DEMO */
margin: 0;
}
jQuery
$(document).ready(function(){
var offset2 = $(document).height();
var lineHF = offset2 - $("#bottommark").position().top;
$(window).scroll(function(){
var offset1 = $(document).height();
var offset = $(window).scrollTop();
var lineH = offset1 - $("#bottommark").position().top - offset;
var lineHpart = lineHF/5; //just in case animation have 5 frames/images
//below is code in case that animation have 5 frames.
//If number of frames is different, edit code (add/remove if loops)
$("span").html(lineH);
if (lineH > lineHpart*4) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg");
}
if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg");
}
if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg");
}
if (lineH < lineHpart*2 && lineH > lineHpart*1) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg");
}
if (lineH < lineHpart) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg");
}
});
});
DEMO
Related
I was referring to the following link to blur background on mouse scroll.
http://codepen.io/sotayamashita/pen/pqLcv
The code is shown as below:
HTML:
<div id="blurred-image-container">
<div class="img-src" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/0*I7mXgSon9oco-rim.jpeg')"></div>
<div class="img-src blurred-img" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>
</div>
<div class="article">
<h1>Medium</h1>
</div>
CSS:
.img-src {
position: fixed;
background-position: center;
-webkit-background-size: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.blurred-img { opacity: 0; }
.article {
width:500px;
height: 2000px;
}
h1 {
color: #fff;
position: fixed;
z-index: 9999;
font-size: 50px;
top: 50%;
margin-top: -25px;
left: 50%;
margin-left: -103px;
}
jQuery
$(window).scroll(function() {
// Get scroll position
var s = $(window).scrollTop(),
// scroll value and opacity
opacityVal = (s / 150.0);
// opacity value 0% to 100%
$('.blurred-img').css('opacity', opacityVal);
});
Then, the background picture that needs to be blurred is not at the very top of the page. My webpage is quite long and the background needs to be blurred is at the very bottom of the page.
I think the following code is trying to set the point where bluring starts to occur at the top of the page. I think there are more than 2000px to scroll down before reaching to the section I want to blur the background.
var s = $(window).scrollTop(), opacityVal = (s / 150.0);
Lets say my html document looks like this:
<div id="firstdiv">
<p>long text goes here....</p>
</div>
<div id="seconddiv">
<p>long text goes here....</p>
</div>
<div id="thirddiv">
<p>long text goes here....</p>
</div>
<div id="blurred-image-container">
<div class="img-src" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/0*I7mXgSon9oco-rim.jpeg')"></div>
<div class="img-src blurred-img" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>
</div>
<div class="article">
<h1>Medium</h1>
</div>
I want the background page to blur when the page is scroll down to #blurred-image-container section.
How can I modify the jQuery to work that?
<div class="out">
</div>
<div class="in">
</div>
out {
width: 100%;
height: 800px;
background: url('background') no-repeat;
}
.in {
width: 100%;
height: 200px;
background-color:olive;
}
$(window).on('scroll', function () {
var pixs = $(document).scrollTop()
pixs = pixs / 100;
var scroll;
$(window).scroll(function (event) {
scroll = $(window).scrollTop();
console.log(scroll);
*if(scroll>606)
{
$(".out").css({"-webkit-filter": "blur("+pixs+"px)","filter": "blur("+pixs+"px)" })
}*
});
});
This solution will require a separate element for the background but uses SVG filter to allow emulating motion blur in vertical direction.
It calculates the difference between last and current scroll position and uses that for a blur value. It debounces as well via using requestAnimationFrame(). It's easy to adopt to support a separate value for horizontal blurring as well.
You may want to tweak scale and max values for the blur, below some initial values only.
var blur = document.getElementById("fltBlur");
var prevY = 0;
var reqId;
window.onscroll = function() {
cancelAnimationFrame(reqId);
reqId = requestAnimationFrame(motionBlur)
};
function motionBlur() {
var y = window.scrollY;
var n = Math.min(32, Math.abs(y - prevY));
blur.setAttribute("stdDeviation" ,"0 " + n);
prevY = y;
}
html, body {width:100%; height:300%}
#cont {
width:100%;
height:300%;
background:url(//i.imgur.com/47zcWet.jpg);
-webkit-filter: url(#svgBlur);
filter: url("#svgBlur");
}
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
<feGaussianBlur id="fltBlur" in="SourceGraphic" stdDeviation="0 0" />
</filter>
</svg>
<div id=cont></div>
Here is the code that i have so far:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 120) {
$("#FixedBox").addClass("fixed");
} else {
$("#FixedBox").removeClass("fixed");
}
});
With this code when the page is scrolled with 120px it add the class fixed to the element with id FixedBox.
What i want?
The element with id FixedBox is contained in element with id Content. So when the page is scrolled with 120 px my script attaches fixed class to FixedBox which makes it fixed.
How can i remove that fixed class when FixedBox reaches the end of Content ?
Here is an image in example:
How i can achieve that?
I hope you can help me!
You could make a function which checks if the scroll height is in between the start and the end of the content and adds the class accordingly. This would even work if you have several blocks of content.
Live Demo (3rd content box is the target)
HTML
<div class="content">
<div class="box">
</div>
</div>
<div class="content" id="target">
<div class="box">
</div>
</div>
CSS
.content{
width: 100%;
height: 400px;
background: red;
margin-bottom: 20px;
position: relative;
}
.fixed{
width: 100px;
height: 100px;
position: fixed;
right: 10px;
top: 10px;
background: blue;
display: block;
}
jQuery
var content = $('#target');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var offset = content.offset();
var height = content.height();
if (offset.top <= scroll && scroll <= offset.top + height) {
$('.box', content).addClass("fixed");
} else {
$('.box', content).removeClass('fixed');
}
});
You can find the end of your content by finding its position by $('#content').offset() or $('#footer').offset() more in the jQuery API Docs.
When you calculate the height of your elements and positions you can figure out the top threshold where you need to remove the fixed class of the FixedBox. Keep in mind that you also need to alter the non-fixed position of your FixedBox when it returns to the DOM flow, else it will snap back to the starting position.
`
var maxScroll = 120 + document.getElementById('#content').offsetHeight;
if (scroll >= 120 && scroll <= maxScroll) {
$("#FixedBox").addClass("fixed");
} else {
$("#FixedBox").removeClass("fixed");
}
You just need to get #content height.
I 'm trying to do kind of slideshow on the background using two img tags. I have a couple of random images, so I have a javascript function to get a random name. But the main problem is: when I zoom or resize window first two slides crop well and display without any problem, but after that every slide is changing if I try to resize the window or zoom in-out.
Here you can see that bug: cullycross.github.io(nevermind about big images, im gonna resize them)
Here is my code:
function randomBackground () {
var active = $('#background .active');
var next = ($('#background .active').next().length > 0) ? $('#background .active').next() : $('#background img:first');
next.attr('src', getRandomName());
var imgHeight = next.height();
var windowHeight = $(window).height();
var diff = imgHeight - windowHeight;
if(diff > 0) {
next.css('top', -diff*0.6);
}
next.css('z-index', 2);
active.fadeOut(1500, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
}
window.onload = function() {
$('#background .active').attr('src', getRandomName());
$('#background').fadeIn(1500);
setInterval(randomBackground, 5000)
}
Here is css:
#background {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
#background img {
position: absolute;
z-index: 1;
float: left;
bottom: 0px;
left: 0px;
top: 0px;
height: auto;
width: 100%;
}
#background img.active {
z-index: 3;
}
Here is part of html:
<div id="background">
<img id="current-image" class="active" />
<img id="next-image" />
</div>
It seem to affect only the images loaded after first run.
Try adding images directly into html, using a
<ul><li><img ...></li></ul>
structure, and get the image from there.
You should decrease the fadeout delay. The problem is caused from the browser since the delay is big it can't handle both fadeout and zoom in/out
active.fadeOut(300, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
And try to use light size pictures, with the same aspect ratio
I didn't found an answer, but I found a library, that makes possible that thing, that I want. Thx to https://github.com/srobbin/jquery-backstretch
I have a series of images that are "stacked" inside of div. I want to transition (crossfade) between these images (not using jQuery), with CSS transitions. What I do not know how to do is endlessly transition between the images. The images are added dynamically through a JSON feed, and they will continue to be added so the number of images in the divs is not set.
I was thinking an approach using the z-index to bring images on top of each other (and then animate the opacity and other properties) but if I want to animate through 4 photos, I am not sure how to keep track of z-index and the opacity settings, to know which is showing. Here is what I came up with so far, but I would be interested in how people cycle through a potentially unknown number of images and keep track of what is "shown". Basically, I have a simple CSS Transition set on the images right now and am animating by adding and removing classes and I want to be able to create a cycle that goes through the images, changing the z-index and some property, and then later send it to the back of the group.
HTML
//Example div (on my page there are many of these)
<div class="imageHolder">
<div class="imageContent">
<img class="homeImages" src="media/test.png">
<img class="homeImages" src="media/test1.png">
<img class="homeImages" src="media/test2.png">
</div>
</div>
CSS
div.imageHolder {
float: left;
position: relative;
width: 32.9%;
padding-bottom: 18.6%;
margin-right: .1em;
}
div.imageContent {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
div img {
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1
}
div img.newImage {
z-index: 2;
opacity: 0;
}
div img.live {
z-index: 3;
opacity: 1;
transition: opacity 1s ease-in;
}
Javascript
function select() {
var x = Math.floor(Math.random() * divs.length);
if(divs[x].children.length > 1) {
var live = document.querySelector('div img.live');
var old = document.querySelector('div img.newImage');
live.className = 'newImage';
old.className += ' live';
}
}
You need js, at least to keep track of which is the current image and add a class that triggers the css transition.
If I understand correctly, you've almost got it. Try this
function select() {
var x = Math.floor(Math.random() * divs.length),
current = document.querySelector('.imageContent img.live'),
newOne = document.querySelectorAll('.imageContent img')[x];
current.className = ''; // clear the .live class
newOne.className = 'live';
// this triggers the css transition
setTimeout(select, 1000); // after the css transition ends, do this again
}
And change the css to
div img {
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* moved .newImage styles here as a default */
z-index: 2;
opacity: 0;
}
I have simple html document that contains divs which hold a series of images:
<div id="container">
<div id="imagelist">
<a href="images/1.jpg"><img src="images/1b.jpg"/>
<a href="images/2.jpg"><img src="images/2b.jpg"/>
<a href="images/3.jpg"><img src="images/3b.jpg"/>
<a href="images/4.jpg"><img src="images/4b.jpg"/>
<a href="images/5.jpg"><img src="images/5b.jpg"/>
<a href="images/6.jpg"><img src="images/6b.jpg"/>
</div>
</div>
I would like to be able to scroll horizontall through the images when hovering over the left or right edge of the div (I have multiple #imagelists all stacked vertically)
I'm trying to use the .scrollWidth() function as such (this is in my script.js file):
var imglist = $('#imagelist');
$(imglist).mousemove(function(e) {
var percent = e.clientX / $(imglist).width();
$(imglist).scrollWidth($(imglist).width() * percent);
});
This doesn't work at all, of course! I've been trying to model this after some good examples I've seen, such as This. What should I alter to make my #imagelist scrollable?
Here's a way to do it using offset and relative positioning.
demo
The HTML looks similar to yours, with the exception that we create elements for the edges. The benifit is that we can style them with CSS, should you ever decide you want :hover styles (example in the demo).
<div class="imagecontainer">
<div class="imagelist">
<img src="http://placehold.it/400x300">
...
<img src="http://placehold.it/400x300">
</div>
<div class="edge right"></div>
<div class="edge left"></div>
</div>
The entire CSS is in the demo, this is just the essentials.
.imagecontainer {
width: 100%;
height: 400px;
overflow-x: hidden;
position: relative;
}
.imagelist {
/* Width allows up to 100 screenfuls, feel free to add a 0
Limiting can be done in the JavaScript */
width: 10000%;
height: 400px;
position: relative;
/* Give it a default left of negative to allow scrolling in either direction */
left: -500px; top: 0;
clear: right;
}
.imagelist img {
float: left;
}
.edge {
position: absolute; top: 0;
width: 50px; height: 100%;
}
.edge.left { left: 0; }
.edge.right { right: 0; }
The JavaScript is the fun part. We find the edges and watch for hover and leave events. Considering only one may be hovered at once (both practically and due to mouseenter), we simply have one timer pointer. This timer controls our animation, and is used to stop the animation (clearInterval) on mouseleave. 20 times per second we move the .imagelist 5 pixels in one direction. That's determined based on which edge we're hovering over.
Instead of using $('.imagelist') we use .parent().find('.imagelist') so that there may be any number of image lists on the page.
var timer = 0;
$('.edge').mouseenter(function(){
var $self = $(this);
var $imglist = $self.parent().find('.imagelist');
timer = setInterval(function(){
var amount, changed;
if ($self.hasClass("left"))
amount = -5;
else
amount = 5;
changed = $imglist.offset().left + amount;
$imglist.offset({left: changed});
}, 50)
}).mouseleave(function(){
clearInterval(timer);
});
It's a little rough, but you can polish it up to suit your needs.