I want a Scroll-Based Animation with image sequences like this:
https://www.wayoutintl.com/
when visit above link ,see section-3 when we scroll down, beach image move from day to night. This animation seems scroll smoothly. my animation scroll smoothly on local and when i put same code on server,sequences images choppy on scroll. not smoothly work on scroll. So what should i do now ? Please help me ..... thanks in advance.... below is my code....
// define images
var images = [
"imgs/0001/0001-compress2.jpg",
"imgs/0001/0002-compress2.jpg",
"imgs/0001/0003-compress2.jpg",
"imgs/0001/0004-compress2.jpg",
"imgs/0001/0005-compress2.jpg",
"imgs/0001/0006-compress2.jpg",
"imgs/0001/0007-compress2.jpg",
"imgs/0001/0008-compress2.jpg",
"imgs/0001/0009-compress2.jpg",
"imgs/0001/0010-compress2.jpg",
"imgs/0001/0011-compress2.jpg",
"imgs/0001/0012-compress2.jpg",
"imgs/0001/0013-compress2.jpg",
"imgs/0001/0014-compress2.jpg",
"imgs/0001/0015-compress2.jpg",
"imgs/0001/0016-compress2.jpg",
"imgs/0001/0017-compress2.jpg",
"imgs/0001/0018-compress2.jpg",
"imgs/0001/0019-compress2.jpg",
"imgs/0001/0020-compress2.jpg",
"imgs/0001/0021-compress2.jpg",
"imgs/0001/0022-compress2.jpg",
"imgs/0001/0023-compress2.jpg",
"imgs/0001/0024-compress2.jpg",
"imgs/0001/0025-compress2.jpg",
"imgs/0001/0026-compress2.jpg",
"imgs/0001/0027-compress3.jpg",
"imgs/0001/0028-compress3.jpg",
"imgs/0001/0029-compress3.jpg",
"imgs/0001/0030-compress3.jpg",
"imgs/0001/0031-compress3.jpg",
"imgs/0001/0032-compress3.jpg",
"imgs/0001/0033-compress3.jpg",
"imgs/0001/0034-compress3.jpg",
"imgs/0001/0035-compress3.jpg",
"imgs/0001/0036-compress3.jpg",
"imgs/0001/0037-compress3.jpg",
"imgs/0001/0038-compress3.jpg",
"imgs/0001/0039-compress3.jpg",
"imgs/0001/0040-compress3.jpg",
"imgs/0001/0041-compress3.jpg",
"imgs/0001/0042-compress3.jpg",
"imgs/0001/0043-compress3.jpg",
"imgs/0001/0044-compress3.jpg",
"imgs/0001/0045-compress3.jpg",
"imgs/0001/0046-compress3.jpg",
"imgs/0001/0047-compress3.jpg",
"imgs/0001/0048-compress3.jpg",
"imgs/0001/0049-compress3.jpg",
"imgs/0001/0050-compress3.jpg",
"imgs/0001/0051-compress3.jpg",
"imgs/0001/0052-compress3.jpg",
"imgs/0001/0053-compress3.jpg",
"imgs/0001/0054-compress3.jpg",
"imgs/0001/0055-compress3.jpg",
"imgs/0001/0056-compress3.jpg",
"imgs/0001/0057-compress3.jpg",
"imgs/0001/0058-compress3.jpg",
"imgs/0001/0059-compress3.jpg",
"imgs/0001/0060-compress3.jpg",
"imgs/0001/0061-compress3.jpg",
"imgs/0001/0062-compress3.jpg",
"imgs/0001/0063-compress3.jpg",
"imgs/0001/0064-compress3.jpg",
"imgs/0001/0065-compress3.jpg",
"imgs/0001/0066-compress3.jpg",
"imgs/0001/0067-compress3.jpg",
"imgs/0001/0068-compress3.jpg",
"imgs/0001/0069-compress2.jpg",
"imgs/0001/0070-compress3.jpg",
"imgs/0001/0071-compress3.jpg",
"imgs/0001/0072-compress2.jpg",
"imgs/0001/0073-compress3.jpg",
"imgs/0001/0074-compress3.jpg",
"imgs/0001/0075-compress3.jpg",
"imgs/0001/0076-compress2.jpg",
"imgs/0001/0077-compress2.jpg",
"imgs/0001/0078-compress2.jpg",
"imgs/0001/0079-compress3.jpg",
"imgs/0001/0080-compress3.jpg"
];
// TweenMax can tween any property of any object. We use this object to cycle through the array
var obj = {curImg: 0};
// create tween
var tween = TweenMax.to(obj, 0.5,
{
curImg: images.length - 1, // animate propery curImg to number of images
roundProps: "curImg", // only integers so it can be used as an array index
repeat: 0, // repeat 3 times
immediateRender: true, // load first image automatically
ease: Linear.easeNone, // show every image the same amount of time
onUpdate: function () {
$("#myimg").attr("src", images[obj.curImg]); // set the image source
}
}
);
// init controller
var controller = new ScrollMagic.Controller();
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 800})
.setTween(tween)
.addTo(controller);
<div class="image-seq">
<section class="demo">
<div class="spacer s0" id="trigger"></div>
<div id="imagesequence">
<img id="myimg" class="lazy"/><br>
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script type="text/javascript" src="js/as.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.7/jquery.lazyload.js"></script>
</body>
When you scroll, you are queuing up the images (maybe many) to be loaded on the next requestAnimationFrame which is why it works ok on local, but not when on a server.
Some of the images are fairly large (the stadium ones are around 150kB each, and you seem to have over 300 of them). The total page size is around 65MB.
Things to try:
Preload the images before initializing the scroller.
Reduce the amount of images and maybe their size.
Try using webP images to reduce their size.
Use vanilla JS to set the image source instead of jQuery.
Use the browser dev tools (network and performance tabs) to check where you bottlenecks are. It might be helpful to set the throttling to 3g so you can test performance on your local version.
My image will not create a scrollbar when it moves off-screen. It is set to absolute, but if the pixel coordinates exceed the screen-size, a scrollbar doesn't appear. It appeared in the other games I have made in the past, but it is not working now and I don't know why.
I have done research on what could be the problem, but I cannot figure it out. I tried setting the overflow to auto on the body and the image, but it makes not difference.
function sprite(picture){
this.sprite=document.createElement('img')
sps.push(this)
document.body.appendChild(this.sprite)
this.sprite.src="./images/"+picture
this.sprite.style.position="absolute"
this.sprite.overflow="auto"
//VARS
this.airborn=true
this.canJump=true
this.width=100
this.height=100
this.midX=window.innerWidth/2
this.midY=window.innerHeight/2
this.left=this.midX-this.width/2
this.top=this.midY-this.height/2
this.right=this.midX+this.width/2
this.bottom=this.midX+this.height/2
this.speedX=0
this.speedY=0
this.accelerationX=0
this.accelerationY=0
this.growthX=0
this.growthY=0
this.opacity=1
//FUNCTIONS
this.setX=function(value){
this.midX=value
this.left=this.midX-(this.width/2)
this.right=this.midX+(this.width/2)
this.sprite.style.left=this.left+"px"
}
this.setY=function(value){
this.midY=value
this.top=this.midY-(this.height/2)
this.bottom+=this.midY-(this.height/2)
this.sprite.style.top=this.top+"px"
}
this.setPos=function(x,y){
this.midX=x
this.left=this.midX-(this.width/2)
this.right=this.midX+(this.width/2)
this.sprite.style.left=this.left+"px"
this.midY=y
this.top=this.midY-(this.height/2)
this.bottom+=this.midY-(this.height/2)
this.sprite.style.top=this.top+"px"
}
this.setWidth=function(value){
this.width=value
this.left=this.midX-value/2
this.right=this.midX+value/2
this.sprite.width=this.width
}
this.setHeight=function(value){
this.height=value
this.top=this.midY-value/2
this.bottom=this.midY+value/2
this.sprite.height=this.height
}
this.setSize=function(w,h){
this.width=w
this.left=this.midX-w/2
this.right=this.midX+w/2
this.sprite.width=this.width
this.height=h
this.top=this.midY-h/2
this.bottom=this.midY+h/2
this.sprite.height=this.height
}
this.setOpacity=function(value){
this.opacity=0
this.sprite.style.opacity=value
}
this.crash=function(intSprite){
var crash=false
if(this.left<=intSprite.right&&this.right>=intSprite.left&&this.top<=intSprite.bottom&&this.bottom>=intSprite.top){crash=true}
return crash
}
}
I expect my sprite to create scroll bars as it moves off the screen, but instead, it just goes away.
I have two html pages: Page1.html, Page2.html. I would like to get the page 2.html when i click the button in page1 with slide effect transition. I have found a lot of plugins and solutions to slide between two divs or slide within a container but what I need is a complete page change.
// Author: Max McKinney
// Version: 1.0
// Description: Fades the page from a given color to show the content and fades out to the given color.
// Requires: jQuery
(function ( $ ) {
$.fn.mPageTransition = function(options) {
// Grab the settings
var settings = $.extend({
color: "#ffc107",
fadeOutTime: 300,
fadeInTime: 300
}, options)
// Get the body reference and get the original background color as we will be changing that during the transition
var body = $('body');
var originalBackgroundColor = $(body).css("background-color");
// Due to the css the body is initially hidden so we will fade it in. This prevents and "flickering" from occuring
$(body).css('visibility','visible').hide().fadeIn(settings.fadeInTime);
// Intercept all link clicks to fade page out
$("a").click(function(e) {
// Get the original link location and stop it from occuring
var link = this;
e.preventDefault();
// First fade body content away, fade the background color to the defined custom color. Once it has fade in, fade it away and then follow the link href
$(body).animate({
"background-color": settings.color,
"opacity": 0
}, settings.fadeInTime, function() {
// Fade background color back to orginal and once finished follow link
$(body).animate({"background-color": originalBackgroundColor}, settings.fadeOutTime, function() {
var href = $(link).attr("href");
location.href=href;
})
});
});
};
}( jQuery ));
http://jsfiddle.net/jc3rj681/2/
Using the plugin jQuery UI Layout, I have several different panes. When the user resizes the window to a small size, I would like to call a function that changes the minsize and size of the pane so that I can make it smaller with the window.
I can do this, but for the changes to apply, I must toggle closed and then toggle open the pane. This creates a lot of flickering and ends up being pretty messy looking. I only need this one pane to resize in this fashion.
QUESTION: Is there a way I can apply these layout changes without having to toggle the pane twice for them to apply?
Check out this Fiddle that I made: http://jsfiddle.net/jc3rj681/2/
In here, the changes to the "width" of the show/hide button don't get applied until you toggle the pane. If you can make this width change work without toggling, I'm sure it would solve my problem as well.
$("#eastToggle").click(function () {
testLayout.toggle('east');
});
$("#attempt").click(function () {
testLayout.options.east.spacing_closed = 20;
testLayout.options.east.spacing_open = 20;
});
I'm not sure if there is a callback function or any special utility method that'll do the trick.
But you can try something like the following (probably with a resize function that'll resize the panes manually) -
var testLayout = $('body').layout({
applyDefaultStyles: true,
east: {
spacing_closed: 100, //toggler width
spacing_open: 100,
togglerLength_closed: 200, //toggler height (length)
togglerLength_open: 200
}
});
$("#eastToggle").click(function() {
testLayout.toggle('east');
});
$("#attempt").click(function() {
resize('east', 20);
});
// A function to resize the tab
function resize(region, space) {
// Width of the new center pane
var newCenterWidth = parseInt($('body .ui-layout-center').css('width').split('px')[0]) + testLayout.options.east.spacing_closed - space;
// Change the options so they don't affect the layout when you expand / collapse again
testLayout.options.east.spacing_closed = space;
testLayout.options.east.spacing_open = space;
// Manually resize the panes
$('body .ui-layout-resizer-' + region).css('width', space);
$('body .ui-layout-center').css('width', newCenterWidth);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West
<br/>
<br/>
<button id="eastToggle">Toggle East Panel</button>
<br/>
<br/>
<button id="attempt">Change Width?</button>
</div>
I am having a few more issues with a script. I am trying to achieve a responsive slide out div script for a "meet the team" page. The way I see it working is that when the persons image is clicked, it slides out their bio. I am running into a few issues though.
1) Script works fine until you click the 3rd or 4th image in the row:
When the 3rd image is clicked, it slides out the div fine, but creates a blank space on the next row (i'm assuming it is pushing the image onto a new line but also adding a margin...)
When the 4th image is clicked, it is creating the bio outside of the container. The only way I can see a fix for this would be to have it slide the opposite way for every 4th item in a row. I can add a counter class to the divs dynamically using my CMS, just not sure how to reference this in the javascript.
2) I'm unsure how to make it work responsively. I am dropping the container from 1/4 to 1/2 on tablet and mobile. So I need to basically double the margin and size of the bio container. How can I declare this in the script?
Many thanks in advance for any help. Credit to Trim Kadrui who helped me with the script so far.
JS Fiddle:
http://jsfiddle.net/QrfzA/21/
Script code:
$(document).ready(function() {
$('.team-photo').click(function() {
var teamBio = $(this).next();
var nextBlock = $(this).parent().next();
if(teamBio.width() > 0){
teamBio.animate({width: 0, opacity: 0});
nextBlock.animate({marginLeft: '0%'});
}
else {
teamBio.css("display", "inline-block");
teamBio.animate({width: '100%', opacity: 100});
nextBlock.animate({marginLeft: '25%'});
}
});
});
$(document).ready(function() {
$('.team-photo').click(function() {
var teamBio = $(this).next();
var nextBlock = $(this).parent().next();
if(teamBio.width() > 0){
nextBlock.css("clear", "none");
teamBio.animate({width: 0, opacity: 0});
nextBlock.animate({marginLeft: '0%'});
}
else {
teamBio.css("display", "inline-block");
teamBio.animate({width: '100%', opacity: 100});
if(nextBlock.position().left>10) {
nextBlock.animate({marginLeft: '25%'});
if(!nextBlock.next().length || nextBlock.next().position().left<10) {
nextBlock.animate({marginLeft: '0'});
nextBlock.css("clear", "both");
}
}
}
});
});
if(nextBlock.position().left>10) does the trick,basically it checks if the there are more than 10 pixels to the left of the nextBlock and then applies the margin left property.
I've checked to see if nextBlock.position().left is greater than 10,you can set it to suite your needs.
EDIT: nextBlock.next().position().left<10 was also needed to be checked in case,the image is last but one in that line. CSS property clear:both was used to send the nextblock to the new line instead of using a margin.
Here is the updated JSFiddle.