Spiderian
Recent Profile Visitors
3,590 profile views
Spiderian's Achievements
2
Reputation
-
It's okay. I scrapped it and used the extraSlider plugin. The buttons were just grey bars on either side. I didn't manually label each of the slides because depending on the project there would be a different number of pictures so I wanted them numbered dynamically. I could have probably written a code that would detect how many pictures and change "n" for slide(n), but it doesn't matter because the plugin is handling it really well. Thank you anyhow.
-
I made this sweet rotator that I can put as many images into as I could ever want, but I am trying to add forward and back buttons. It's not going well. I tried this code for the forward button but I can't seem to figure out how to add a 30 second pause before restarting the animation. rightBtn.click(function(e) { console.log( slideAnimating ); var btnIndex = rightBtn.index(this); if(!slideAnimating && btnIndex !== slideNumber) { timerFunction.pause(); nextSlide = btnIndex; changeSlide(); } }); Then the left button I want to play the animation in reverse to get the last image that was designated currentSlide and nextSlide to move backwards, wait 30 seconds then go back to the normal flow. Any help would be greatly appreciated.
-
Great Scott!! It works amazingly. I fiddled with the math and stuck it in an if statement to detect weather or not the "#body" has overflow so no mater what length of content it behaves accordingly. $(document).ready(function(){ var element = document.querySelector('#body'); if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){ // your element has overflow var animationSpeed, baseSpeed = 8,//this would be the default duration of the instance baseHeight = 896,//this height is considered as the height of the element that would make the tween last for the time determinated by the base speed var elementHeight = $("#container").outerHeight();//use outer height in case you're adding padding and/or borders to the element's CSS function setSpeed(){ animationSpeed = baseSpeed * ( elementHeight/baseHeight ); }; setSpeed(); //you can call that function every time the element's height changes in order to change the animation duration accordingly function delayedStart(){ TweenMax.delayedCall(25, scroller); }; function scroller(){ TweenMax.to("#body", animationSpeed,{ scrollTo:{y:"max"}, delay:15, onComplete:backToStart }); }; function backToStart(){ TweenMax.to("#body", 0, { scrollTo:{y:0}, delay:15, onComplete:delayedStart }); }; scroller(); } else{ //your element doesn't have overflow } }); Thank you again Rodrigo!
- 15 replies
-
- 1
-
-
- percent scroll
- scrollTo
- (and 2 more)
-
Thanks Rodrigo. I realized I had the window in after. It works perfectly, but is there a way to have the "scroller" function based on the height of the child div? So if it only hangs over by 50px it scrolls faster than if it is over by 1000px.
-
Would this work for scrolling content in a div if it's parent is overflow hidden? function scroller (){ var bottom = $('#container').height(); console.log(bottom.height); TweenMax.to(window, 5, {scrollTo:{y:bottom}, ease:Power2.easeOut}); TweenMax.delayedCall(3, scroller); }
-
I seem to be missing something. I think it's not logging the mouse posistion more than once. http://codepen.io/Spiderian/pen/ktAaF
-
I was playing with paralax scrolling and found an old forum post about it following the mouse. The movement works well but I want to replace the pageX with the posistion of the div#viewPort offset. I tried a few things to get it and return it as a var but I couldn't get the doParallax function to read it. Any help is greatly appreciated.
-
I'm not sure what you're talking about. The js appending is the same id with an "a" at the end. rt01 -> rt01a. Your codepens don't seem to run.
-
Thank you both. You put me on the right direction The tabbing part isn't a problem; this is going on a non interactive player. It seems to be changing the text when I remove the old slide and then change the name of the new slide to the old one. http://codepen.io/Spiderian/pen/FBjhk
-
Hi, I am having trouble getting my animation to fire after I create new slides. I am trying to make a train board that updates from xml data every 20 seconds or so. 1. Create new slides 2. Animate new slides in from above the "slotXX" Futre steps: 3. Change div tag removing the "a" while changing z-index and removing hidden old slide 4. Repeat If anyone can set me on the right direction many thanks will ensue. I don't mind if you just point me to a tutorial that's almost identical or if you want to fork my codepen.
-
I don't think I'm that far off. My new codepen works almost perfectly but it doesn't seem to matter what disk you click. It just goes in a linear order. http://cdpn.io/IKvah I think there is something funny in the way the killAll handles stopping the current animation. For some reason the function don't appear to be attached to a disc, but instead they just go in order depending on how many times any of those buttons is clicked. disc01.onclick = function(){TweenMax.killAll({onComplete:animate_rot01});}; disc02.onclick = function(){TweenMax.killAll({onComplete:animate_rot02});}; disc03.onclick = function(){TweenMax.killAll({onComplete:animate_rot03});}; disc04.onclick = function(){TweenMax.killAll({onComplete:animate_rot04});}; disc05.onclick = function(){TweenMax.killAll({onComplete:animate_rot05});};
-
That fixes the killAll but how do I get it to killAll and then go to an play animate_rotnn? Do I have to word it with an oncomplete?
-
I am trying to build my own custom rotator, but I am having a problem with interrupting the current animation, then going to a specific one to play from there. I made a click function that plays from the desired spots, but I have tried several ways to interrupt the current animation. disc01.onclick = TweenMax.killAll(); animate_rot01; disc02.onclick = TweenMax.killAll(); animate_rot02; disc03.onclick = TweenMax.killAll(); animate_rot03; disc04.onclick = TweenMax.killAll(); animate_rot04; disc05.onclick = TweenMax.killAll(); animate_rot05; Here is the link to my codepen http://cdpn.io/IKvah If I take out the killAll it plays through fine, but when I add it, it seems to fire before I click anything. Any help would be awesome. After I figure out how to kill the animation I want to have the click ignore the delay.
-
Using a combination of both of your advice I got it working smoothly. I had to add an extra layer to hide the map holder. Then I made the holder way bigger and offset to have room to the top and left. The hierarchy made it so you can't drag the map off the screen before I scale it up. Thanks!
-
It breaks the coding for my draggable and I am struggling with an if statement so it won't allow scrolling until it is zoomed in. I'm trying to make a map that you can zoom in and out to different locations and drag around. It seems to break if I do anything but zoom to the top left corner. All the images are 2000px square pngs. I force them to start at 1080px. I didn't think it would be this hard to redefine the area after zooming in.