I'm trying to fade an image as background an I want to fade out only background image not the text.
I want to text stay on the page.
This is what I use:
https://codepen.io/nickcil/pen/sfutl
Help me please.
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
/*win.scroll(function(){
scrollPosition = win.scrollTop();
scrollRatio = 1 - scrollPosition / 300;
$(".top").css("opacity", scrollRatio);
*/
/*$(window).scroll(function(){
var scrollVar = $(window).scrollTop();
$('.top').css("opacity", 1 - scrollVar/300);
})*/
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="title">Fade Away</div>
</div>
opacity affects all content inside an element,you must use background-color instead of opacity, so:
Change:
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
To:
$(".top").css('background-color', 'rgba(170,170,170,' + (1 - ($(window).scrollTop() / 250)) + ')');
$(window).scroll(function(){
$(".top").css('background-color', 'rgba(170,170,170,' + (1 - ($(window).scrollTop() / 250)) + ')');
});
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top"><div class="title">Fade Away</div></div>
Note: I change color for .title to black,for you to see the result better.
You need to add another element inside .top and have that fade out instead of fading the outer container:
$(window).scroll(function(){
$(".top-inner").css("opacity", 1 - $(window).scrollTop() / 250);
});
body {
margin: 0;
height: 1000px;
}
.top-inner {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
}
.title {
position: absolute;
top: 60%;
left: 100px;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="top-inner"></div>
<div class="title">Fade Away</div>
</div>
Related
I've created a Back to Top function with jQuery.
The scroll back to top works but I can't seem to figure out how to hide it and only appear when say scrollTop() > 300. I created a function to take care of that but unfortunately no luck.
Here's a link to a jsfiddle https://jsfiddle.net/pvan_ren1/st3mdp6a/10/
//This is the function that's supposed to take care of the hide and reveal of toTop button.
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
You should edit your CSS to hide your "Back to Top" button by default, and then show it when the show class is added.
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
jQuery(document).ready(function() {
var btn = $('#toTop');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 700);
});
});
.sectionA {
width: 100%;
height: 600px;
background-color: pink;
}
.sectionB {
width: 100%;
height: 600px;
background-color: green;
}
.sectionC {
width: 100%;
height: 600px;
background-color: purple;
}
.sectionD {
width: 100%;
height: 600px;
background-color: orange;
}
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
#toTop:hover {
cursor: pointer;
background-color: #333;
}
#toTop:active {
background-color: #555;
}
#toTop::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<p style="position:fixed">Scroll Down and use the toTop button</p>
<br>
<p style="position:fixed">
At the top, the "Back to Top" button does not show.
<b>It works!</b>
</p>
<section class="sectionA">
</section>
<section class="sectionB">
</section>
<section class="sectionC">
</section>
<section class="sectionD">
</section>
</body>
<a id="toTop"></a>
Before anything, set the style of the button to display: none then the code below should do it for you:
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#toTop').css('display','inline-block');
} else {
$('#toTop').css('display','none');
}
});
I'm new at jQuery and I need help. I want to make the text move up and static box slowly disappear when you scroll website down.
Something like this: http://eliastinchon.com/
p,
body {
margin: 0;
padding: 0;
}
body {
height: 3000px;
font-family: sans-serif;
background-color: #282828;
}
#slide {
color: #ffffff;
font-weight: 600;
font-size: 80px;
position: absolute;
top: 180px;
left: 40px;
z-index: 10;
}
#static {
width: 400px;
height: 200px;
background-color: orange;
float: right;
margin-top: 150px;
margin-right: 80px;
color: #ffffff;
text-align: right;
font-size: 12px;
}
<div id="box">
<p id="slide">Some text</p>
<!-- This slideUp when scrolling down -->
<div id="static">This box is static</div>
How about this approach:
$(document).on('scroll', function() {
$("#slide").css("top", Math.max(180 - 0.2*window.scrollY, 0) + "px");
$("#static").css("opacity", Math.max(1 - 0.004*window.scrollY, 0));
})
Here is the updated Fiddle.
I would of course recommend changing the functions if you dont like the linear transitions.
I want to make my marquee scroll from top to bottom, instead of on right to left.
I fount a snippet online that uses jquery .animate but I can figure out how to make it scroll instead on move right to left
jQuery(document).ready(function($) {
var marquee = function() {
var window_width = window.innerWidth;
var speed = 12 * window_width;
$('#marquee li:first').animate( {left: '-980px'}, speed, 'linear', function() {
$(this).detach().appendTo('#marquee ul').css('', "100%");
marquee();
});
};
if ($("#marquee li").length > 1) {
marquee();
}
});
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
#marquee {
background: #090;
font-family: Arial, Verdana, sans-serif;
color: #FFF;
font-size: 12px;
text-align: center;
font-weight: bold;
line-height: 20px;
width: 1035px;
}
#marquee ul {
width: 100%;
height: 20px;
position: relative;
overflow: hidden;
}
#marquee li {
width: 980px;
line-height: 20px;
height: 20px;
position: absolute;
top: 0;
left: 100%;
text-align: center;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marquee">
<ul>
<li>test 1</li>
<li>test 2</li>
</ul>
</div>
You need to adjust for it to work on Y not X, so switch out width for height, and you'll need to position fixed or absolute, so it spans the entire window height.
$(document).ready(function($) {
var marquee = function() {
var window_height = window.innerHeight;
var speed = 12 * window_height;
$('#marquee li:first').animate( {top: '100%'}, speed, 'linear', function() {
$(this).detach().appendTo('#marquee ul').css('', "100%");
marquee();
});
};
marquee();
});
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
#marquee {
background: #090;
font-family: Arial, Verdana, sans-serif;
color: #FFF;
font-size: 12px;
text-align: center;
font-weight: bold;
line-height: 20px;
width: 100px;
position:fixed;
top:0;
bottom:0;
left:0;
}
#marquee ul {
width: 100%;
padding:0;
margin:0;
height:100%;
}
#marquee li {
width: 100px;
line-height: 20px;
height: 20px;
position: absolute;
top: 0px;
left: 0;
text-align: center;
list-style: none;
font-size:14px;
}
Working example - https://jsfiddle.net/7sunt6fz/1/
I want the height of info_content to cover the below rest screen, I tried some jQuery. I am just a beginner so I am unable to do it properly. I would appreciate your help to resolve this problem.
var divHeight = $('.video_content').height();
$('.info_content').css('min-height', divHeight + 'px');
content {
width: 100%;
background: #fff;
position: fixed;
top: 80px;
bottom: 40px;
}
.content .inner_content {
position: relative;
width: 100%;
height: 100%;
}
.content .inner_content .left_content {
position: absolute;
background: #eee;
left: 0;
width: 40%;
height: 100%;
padding: 15px;
}
.content .inner_content .left_content .video_content {
height: 50%;
overflow-y: auto;
display: inline-block;
width: 100%;
}
.content .inner_content .left_content .info_content {
background: gray;
display: inline-block;
height: 50%;
overflow-y: auto;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="inner_content">
<div class="left_content">
<div class="video_content">
Some videos comes here
</div>
<div class="info_content">
Some info text comes here
</div>
</div>
</div>
</div>
You can still use height() to set the height of a matched element.
var divHeight = $('.video_content').height();
$('.info_content').height(divHeight);
Use innerHeight to get the height of the window and subtract it with the height of .video_content
Check the fiddle
https://jsfiddle.net/pranesh_ravi/szgavxw3/2/
Have a look at this edit from your side. Added the jQuery library and did modifications.
$(document).ready(function() {
function calcHeights() {
var divHeight = $('.video_content').innerHeight();
var totalHeight = $('.left_content').innerHeight();
var infoHeight = totalHeight - divHeight - 20;
$('.info_content').css('min-height', infoHeight + 'px');
};
// The height of.info_content should be 100% to window
$(window).on('resize', function() {
calcHeights();
});
calcHeights();
});
img {
width: 100%;
}
.content {
width: 100%;
background: #fff;
position: fixed;
top: 80px;
bottom: 0px;
}
.content .inner_content {
position: relative;
width: 100%;
height: 100%;
}
.content .inner_content .left_content {
position: absolute;
background: #eee;
left: 0;
width: 40%;
height: 100%;
padding: 15px;
}
.content .inner_content .left_content .video_content {
overflow-y: auto;
display: inline-block;
width: 100%;
}
.content .inner_content .left_content .info_content {
background: #333;
display: inline-block;
overflow-y: auto;
width: 100%;
color: #fff;
font-family: 'arial';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="content">
<div class="inner_content">
<div class="left_content">
<div class="video_content">
<img src="https://mediaarchive.cern.ch/MediaArchive/Video/Public/Movies/CERN/2016/CERN-MOVIE-2016-041/CERN-MOVIE-2016-041-002/CERN-MOVIE-2016-041-002-posterframe-640x360-at-55-percent.jpg">
</div>
<div class="info_content">
these height should be till bottom
</div>
</div>
</div>
</div>
Use this jquery.
var divHeight = $('.video_content').height();
var windowHeight=$(window).height();
var infoHeight=(windowHeight-divHeight);
$('.info_content').css('height', infoHeight+'px');
I have delays in place within my div gray. I don't want those delays or animation to start until the user would scroll to that specific div. What I have tried doing is not working. The delays and animation still work, but they begin once the page loads.
Does anyone see what I am doing wrong?
$(function() {
var oTop = $('.gray').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
textdelays();
}
});
});
$(function textdelays(){
$('#text').delay(1000).fadeIn(2200);
$('#text-button').delay(1000).fadeIn(2200);
$('#text-button').animate({'top': '60%'}, 1000);
});
.green {
background-color: green;
width: 100%;
height: 500px;
}
.yellow {
background-color: yellow;
width: 100%;
height: 500px;
}
.gray {
background-color: #CCC;
width: 100%;
height: 300px;
}
#text {
color: blue;
display: none;
text-align: center;
position: relative;
margin: 0 25%;
top: 35%;
font-size: 1.3em;
}
#text-button {
position: relative;
wdith: 100%;
text-align: center;
top: 70%;
display: none;
cursor: pointer;
}
.border-span {
border: 2px solid #FFF;
padding: 15px 10px;
color: #FFF;
font-weight: bold;
}
.border-span:hover {
background-color: #FFF;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="green"></div>
<div class="yellow"></div>
<div class="gray">
<div id="text">text.</div>
<div id="text-button"><span class="border-span">text animation</span></div>
</div>