I've been playing with Scrollmagic and managed to get a few things working. What I'm trying to do right now is create a sticky social sharing bar for my blog at the bottom of the viewport. I've had no issues managing to get it to show up with my code
// Sticky Share Bar
var stickyShareAnimation = TweenMax.fromTo(shareBar, 0.5,
{ bottom:-50},
{ bottom:0 }
);
var share = new ScrollMagic.Scene({
triggerElement: '.entry',
offset:60,
})
.setTween(stickyShareAnimation)
.setPin('.share-bar')
.addIndicators()
.addTo(controller)
This is the HTML
<section class="share-bar">
<div id="share-container" class="container">
<div class="row">
<div class="col-md-12">This is the content</div>
</div>
</div>
</section>
<section class="blog-content">
<div class="container">
<div class="row">
<article class="single-post">
<div class="entry">
<?php the_content();?>
</div>
</article>
</div>
</div>
</section>
<section class="Test">
Where I want sharebar to tweenout.
</section>
I know I could fade out the sharebar with another Tweenmax animation targetting the "section Test" but figured there was probably a better way to do so with my initial javascript. Is there another way or would I need to create a seperate Tween for the sharebar to hide after content (div.entry) finishes.
Codepen http://codepen.io/anon/pen/aOWBQZ
If you want scrollbound animation (scene duration > 0) then yes, you should create one scene for animating the header in and one to animate it out again.
If you want to trigger an animation and animate the same property (i.e. opacity, when fading in and out) using ScrollMagic's setTween method, there will be problems related to property overwriting.
For details see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another
NOTE: The wiki was written for ScrollMagic 1.3, but the same principle applies.
The recommended solution is this (Updated for ScrollMagic 2.x):
http://jsfiddle.net/xk22Lx50/
An easier solution however might be to define a CSS class and use setClassToggle to add or remove it for a certain time.
Animation can be achieved using CSS animations.
See: http://scrollmagic.io/examples/basic/class_toggles.html
And one more thing:
If your pinned element is always pinned (as in your example) and just animates in or out, but is never part of the DOM flow, there is no reason to make it sticky (i.e. to use ScrollMagic's pin functionality).
Just set it to position: fixed in css and you're done.
You can still use ScrollMagic to animate it in and out, but have less (unnecessary) JS code.
Related
I'm trying to make an entire website with all events triggered by scrolling. I just need help to achieve this effect :
I have a website with a few divs which fill all the viewport, I want the user to be able to scroll down to a named div and then when he keep scrolling the website stop scrolling vertically but the content of the div scroll horizontally. when it's done the website can scroll vertically again.
<body>
<header> </header>
<div class="scroll-vertical" id="tile1"></div>
<div class="scroll-vertical" id="tile2"></div>
<div class="scroll-vertical" id="tile3"></div>
<div class="scroll-horizontal" id="tile4">
<div class="horizontal" id="tile5"></div>
<div class="horizontal" id="tile5-a"></div>
<div class="horizontal" id="tile5-b"></div>
<div class="horizontal" id="tile5-c"></div>
</div>
<div class="scroll-vertical" id="tile6"></div>
<div class="scroll-vertical" id="tile7"></div>
<footer> </footer>
How to make that the website can only be scrolled from one div to the other ( full page)
I know there is a jquery plugin named fullpage.js which does that pretty well but as a student learning web development using plugins is not the best way to improve my skills.
Thanks for your help!
Cheers Simon
Why would you assume that ?
I doubt it can get much simpler than
$(document).ready(function() {
$('#fullpage').fullpage();
});
The author of the plugin also most likely already encountered, considered and had to solve a number of details and issues, cross-browser and non, that you have not yet had a chance to think about.
Edit :: animating divs:
$( "#bigasshorizontaldiv" ).animate({
left: "-=thewidthofoneviewport",
}, 5000, function() {
// Animation complete.
});
I use materializecss to create a slider.
However the image is full width, but not full height(its more than full height, so i get scrollbars). What do i need to change to make the slider fill out my screen with no scrollbars? I also use $('.slider').slider({full_width: true});
<div class="navbar-fixed">
<!-- some stuff-->
</div>
<div class="container-fluid">
<div class="carousel carousel-slider center">
<a class="carousel-item"><img class="responsive-img" src="http://lorempixel.com/800/400/food/1"></a>
</div>
</div>
If you just want to hide scrollbars then add
overflow: hidden;
To container which is having the scroll
Are you using the correct JavaScript?
On Materialize's site (I've used Materialize before, and thought something looked off about your code) it has this as the way to initialize a slider as "full_width:"
$('.carousel.carousel-slider').carousel({full_width: true});
In fact, your slider doesn't even have the .slider class; it only has .carousel-slider and .carousel.
I'm thinking if you use the above JavaScript you should be alright.
The playground
http://labs.recgr.com/polymer-dev/test1.html
My goal
I've managed to replicate this animation, but I need it to have content as well (text and images).
The Problem
Inserting content - I've been experimenting with adding just text for now, and I cannot get it working.
What I've tried
Adding content directly to div circle div container in circles-page.html, it doesn't work properly.
<div class="circle">test</div>
Result:
Getting position with jQuery, on circles-page.html (at the bottom of the page):
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
var sq_pos = $(".square");
console.log(sq_pos.position());
});
</script>
.. and then using that to make an invisible div above that, to display content.
Result: undefined (in Chrome Console)
I also tried using jQuery to add content once Dom is ready, but it didn't work, nor did various properties inside Polymer object I've tried (that I've seen on documentation).
Thank you.
You can use Polymer's layout system to achieve this easily.
To lay out all the circles horizontally, apply horizontal layout to the parent div. Then you just need to use center-center horizontal layout on the child div to center the text.
<div class="horizontal layout">
<div class="circle center-center horizontal layout">test</div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
You can read more about this iron-flex-layout from here.
So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
...
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
and the JQuery looks like this:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.
However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.
I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).
Thanks in advance.
I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.
http://jsfiddle.net/f3EJ3/
I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks
I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.
The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.
See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.