div appear smoothly using jquery - javascript

my div should appears smoothly after a while, i think it needs a transition script code, this is my script that shows the div after 800 pixels scrolled down.
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 700) {
$('.menu').fadeIn();
} else {
$('.menu').fadeOut();
}
});
I don't know how to put transition in this code, sorry i don't know javascript at all

For a better experience use CSS transitions and not jQuery animations. The way to do it is to use your scroll function to add / remove classes from your menu element and than use css to create the fade in effect.
For example:
CSS
.menu {
opacity: 0;
visibility: hidden;
transition: all .4s ease-out;
-webkit-transition: all .4s ease-out;
}
.menu.show {
opacity: 1;
visibility: visible;
}
JS
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 700) {
$('.menu').addClass("show");
} else {
$('.menu').removeClass("show);
}
});

Related

How can I expand the scrollbar width smoothly using transition/animation?

I am trying to expand scrollbar width smoothly using transition. I can expand it adding a class to custom scrollbar. But how can I do the expansion smoothly?
CSS
.articles-container
{
transition: width 2s ease-in-out;
}
.articles-container::-webkit-scrollbar
{
width: 20px;
transition: width 2s ease-in-out;
}
.articles-container.expanded::-webkit-scrollbar
{
width: 30px;
transition: width 2s ease-in-out;
}
JAVASCRIPT
var myDiv = document.querySelector('.articles-container');
// bunch of onscrollbar calculations here
if (onscrollbar)
{
// console.log('Mouse is on the scrollbar');
myDiv.classList.add('expanded');
}
else
{
// console.log('Mouse is not on the scrollbar');
myDiv.classList.remove('expanded');
}
How can I add a transition or animation to the width? The way I tried isn't working. Any other way of doing this? Please I need help

Removing and adding a class through javascript smoothly

I am trying to create this animation where the title is visible in the page initially then when you scroll down you trigger the title to slowly fade away and a subtitle fades in right after. I have the title part working but I can't seem to get the subtitle to appear with a smooth transition. At first I have my subtitle at "visibility:hidden" then when I scroll and the javascript adds the transition in class, it just abruptly comes in disregarding the transition property I gave it. Here is the fiddler I set up. Below is the javascript and css (respectively) i'm using to get this animation to work. Of course if there area any easier ways to achieve this feel free to let me know. Any advice or help will be GREATLY appreciated I have been researching and trying things to no avail.
Javascript
const element = document.getElementById('title');
const element2 = document.getElementById('subtitle');
window.onscroll = function() {
console.log("document element");
console.log(document.documentElement.scrollTop);
console.log("scrolling elemnent");
if (window.scrollY > 0) {
element.classList.add('fadeout');
element2.classList.add('fadein');
console.log("hello");
}
}
.fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
.two {
visibility: hidden;
}
#subtitle {
transition: opacity 2s linear;
}
.fadein {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
Currently your subtitle is at full opacity when you are fading it in (Because the visibility property does not set the opacity it just makes the element invisible)
Add opacity:0; to the .two CSS so that it will fade in.
Updated fiddle https://jsfiddle.net/s2cban6q (line 32 of CSS changed)

Making an image visible/invisible depending on the scroll position

So, i have a little arrow in my page:
<img src="images/arrow_up.png">
I wanna make it invisible when the page is at the top and then, as the user scrolls down, to make it visible so the user can click to go back to the top of the page.
This Javascript doesn't seem to be working:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
I also have this css (which is working):
.scrollToTop{
padding: 1em;
color: #444;
position: fixed;
right: 0;
bottom: 0;
-webkit-transition: -webkit-transform .3s ease-in-out;
-ms-transition: -ms-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
z-index: 1;
}
.scrollToTop:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
I'd apreciate some help! :)
Not sure if your exact issue was this, but copying your code into a JS fiddle revealed that if the page was less than the window height, the arrow would always show.
A fix for this was to include a default display:none and then check window height on scroll. Checking it every time would allow the page to grow and shrink and still allow the arrow to only display when needed.
A working example can be seen at this JSFiddle.
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
ShowScroll();
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
function ShowScroll() {
if (window.innerHeight < $("body").height())
{
var elem = $(".scrollToTop");
if (elem.css("display") == "none") elem.css("display","inline");
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
} else {
$(".scrollToTop").css("display","none")
}
}

How to ignore an transition based on javascript

Heyy guys,
At first I want to apologize for my bad english.
I am making an site wich you can find here for the moment: http://rekenopjetoekomst.nl/test/test.html
When you scroll down the height of the foto under the menu will decrease. But the arrows that you need to navigate trough the slideshow have to disappear also. I am doing that by changing the opacity to 0 with a transition.
But my problem is that when you scroll down and then scroll fast up (a second or something) you will still see the arrows (with an opacity of 0.6 or something). Soo.. What I want is: When the arrows are out of the screen the opacity must be 0 without an transition. And if you scroll back to the foto the arrows have to appear with an transition.
Thnx for all your help!
Javascript (with only the arrows 1 and 2):
function yScroll(){
pijl1 = document.getElementById('pijl1');
pijl2 = document.getElementById('pijl2');
yPos = window.pageYOffset;
if(yPos > 100 && yPos < 370){
pijl1.style.opacity = "0.8";
pijl2.style.opacity = "0.8";
} else if(yPos > 370){
pijl1.style.opacity = "0.0";
pijl2.style.opacity = "0.0";
}
}
var animateInterval = setInterval(yScroll,10);
CSS:
#mainbox #foto #pijl1 {
transition: opacity 1s ease-in 1.3s;
}
#mainbox #foto #pijl2 {
transition: opacity 1s ease-in 1.3s;
}
I would use a tri-state setup.
the first state is the visible (normal) one. The second is the fading state, the opacity is set to 0, and there is a transition on it. The third one is the out state. in this one, we set the opacity to 0, but without delay.
To manage this, we create 3 classes, and asign each one according to the scroll level
demo with extended timings so it is easier to see
function yScroll(){
ele = document.getElementById('test');
yPos = window.pageYOffset;
if(yPos > 200){
ele.className = "out";
} else if(yPos > 100){
ele.className = "fading";
} else {
ele.className = "normal";
}
}
var animateInterval = setInterval(yScroll,10);
#test {
height: 50px;
width: 100px;
margin-top: 300px;
background-color: green;
}
.pusher {
margin: 3000px;
}
.out {
opacity: 0.1;
transition: opacity 0.1s;
}
.fading {
opacity: 0.2;
transition: opacity 20s;
}
.normal {
opacity: 1;
transition: opacity 20s;
}
<div id="test"></div>
<div class="pusher"></div>

How to hide/show the div using javascript with transition ease-in-out effect?

This is my code which hide/show the div...but I want transition effect while hide/show in javascript like ease-in-out. How to achieve this in javascript?
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
window.scrollTo(0, 2346);
}
else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
I am not sure, why you are not using CSS3 transitions.
But to keep it all strictly javascript probably this source code is helpful:
https://github.com/jquery/jquery/blob/master/src/effects.js#L107
As has been pointed out, you should use CSS3 transitions if you want to do this in a standard way which will also not cause a lot of trouble because of high maintenance.
However, the problem then is you're trying to use a transition on a property with no quantifiable transitional values. There is no middle ground between display: block; and display: none; so you must use something which does have transitional values. Usually a property such as width or height is appropriate, but you can also use it on opacity, left, top, etc. (so basically any property with a numeric value).
This CSS is for an element which fades and slides in and out of a document from the top.
.panel {
position: absolute;
top: 0px;
opacity: 0;
-moz-transition: opacity .25s ease-in-out , top .25s ease-in-out;
-o-transition: opacity .25s ease-in-out , top .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out , top .25s ease-in-out;
transition: opacity .25s ease-in-out , top .25s ease-in-out;
}
.panel.show {
top: 50px;
opacity: 100;
}
Here's a Javascript that goes through the elements, checks for a data-toggle attribute, and assigns a click handler if it finds it. The handler toggles the show class for the targeted element.
function toggleElem(evt) {
var cn = 'show';
var panel = document.getElementById(evt.target.getAttribute('data-toggle'));
var classes = panel.className.split(/\s+/);
var x = classes.indexOf(cn);
if(x >= 0)
{ classes.splice(x,1); }
else
{ classes.push(cn); }
panel.className = classes.join(' ');
}
var elems = document.body.getElementsByTagName('*');
for(var i=0,l=elems.length;i<l;i++) {
var elem = elems[i];
var toggle = elem.getAttribute('data-toggle');
if(toggle !== null)
{ elem.addEventListener('click',toggleElem,false); }
}
Example HTML.
<input type="button" data-toggle="foo" value="Toggle"/>
<div id="foo" class="panel">
<p>This is a transitioned panel.</p>
</div>
Because of the fact you would be using opacity instead of display you may also run into the snag that the element you want to toggle, though invisible, will still be there as far as your cursor is concerned. You may then want to use setTimeout() to change the display value in addition to performing the class change to keep your transitioned element from catching input when hidden.

Categories