Quick question. I'm using jquery to target the "src" attribute of the logo on my website. So when the navbar shrinks (on scroll) the logo changes to a lighter version of the same image.
This worked PERFECTLY when I was making the site locally in HTML. It even worked perfectly when I uploaded the HTML to my web-host. However as I've started to move my site into a Wordpress theme, there is about a second delay in the image switch over. I was wondering If someone could take a look at my site and tell me what the problem might be? - Like I said, it was working perfectly locally and uploaded as plain HTML. Do I need to somehow preload the second image in jquery?
My URL is: http://iwebyou.com.au - Scroll down and notice when the navbar shrinks, there is a delay in the logo switching over. Also please ignore the rest of my website, its unfinished and everything else is a complete mess right now haha..
Cheers
Without seeing your code, it's difficult to help further, but IMO the best solution would be to set the logo as a background-image via CSS classes and then change the css class with javascript when needed, rather then modifying an image src attribute.
<div class="logo logo-dark">Company Name for SEO</div>
and
<div class="logo logo-light">Company Name for SEO</div>
css:
.logo-dark {
background-image: #fff url('path to dark logo') no-repeat center center;
}
.logo-light {
background-image: #fff url('path to light logo') no-repeat center center;
}
.logo {
// common logo styles
}
Here's an example using opacity and transition:
window.addEventListener('scroll', e => {
const nav = document.querySelector('.nav');
if(window.scrollY > 50) {
nav.classList.add('dark');
}else {
nav.classList.remove('dark');
}
});
img {
width: 200px;
position: absolute;
top: 0;
left: 0;
transition: all 500ms ease;
}
.light {
opacity: 0;
}
.nav {
background: white;
position: fixed;
top: 0;
height: 60px;
width: 100%;
transition: all 500ms ease;
}
.nav.dark {
background: black;
}
.nav.dark .dark {
opacity: 0;
}
.nav.dark .light {
opacity: 1;
}
.content {
height: 1000px
}
<div class="content">
<div class="nav">
<img src="https://www.iwebyou.com.au/wp-content/uploads/2018/06/cropped-I-Web-YouDark-2.png" class="dark" />
<img src="https://www.iwebyou.com.au/wp-content/uploads/2018/06/I-Web-YouLight-2.png" class="light" />
</div>
</div>
This site I am developing is using HTML5, CSS3, Bootstrap 4, and Jquery. I would like to have a scroll effect on a full-screen background-image that is at the very top of my page (100vh hero banner type thing). I am trying to gradually increase the contrast (css filter: contrast(some%)) of an image as the user scrolls down (its fine if the image is completely unrecognizable by the time it leaves viewport).
I have some Jquery that somewhat does the effect I am looking for, however I would like the effect to be more gradual.
The main issue I am having is that when the user scrolls back to the top of the page the contrast value gets set to 0% leaving a completely grayed out image. What I would like is for the contrast to gradually decrease back to normal (100%) as the user scrolls back up all the way to the top of the page.
I have set up a very simplified codepen. I couldn't get a css background-image url value to reference an external link from codepen, so I am targeting the effect on a full screen image ().
Thanks!
Link to the Pen: [codepen-link][1]
[1]: http://codepen.io/wdzajicek/pen/MVovZE
See code below in snippet
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = $(window).scrollTop();
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
There is the main problem in $(window).scrollTop(); it will return 0 value
that's why contrast value gets set to 0% leaving a completely grayed out image
var pixelstop = $(window).scrollTop();
replace the code with
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
don't just copy this code please understand thanks.
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
console.log(pixelstop);
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
100 is default value of filter contrast not 0. that's why the background is grey out because it reaches zero.
Heyo,
I'm currently working on a background slider but I can't make it work as I want it to work.
So what I need is a fade-effect which produces no white space between the images.
So ... the following image should fadeIn but the current image should just stay and fadeOut when the fadeIn effect of the following image is done. (If that makes sense)
This is the current script I'm using:
$(document).ready(function(){
var count = 1;
var images = [ "http://i.imgur.com/HX0X6lV.png", "http://i.imgur.com/N50Ye7i.png", "http://i.imgur.com/TFG5oaa.png"];
var image = $(".background");
setInterval(function(){
image.fadeOut(500, function(){
image.css("background-image","url("+images[count++]+")");
image.fadeIn(500);
});
if(count == images.length)
{
count = 0;
}
},3000);
});
.background {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background-size: cover;
background-position: center center;
background-image: url("http://i.imgur.com/HX0X6lV.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>
Im trying to work out script that will change background images every 3 sec using fadeIn, fadeOut, addClass and removeClass.
Is there a better way to do it using setInterval?
$("document").ready(function () {
$("#bg").delay(3000);
$("#bg").fadeOut(300);
$("#bg").removeClass('bg1');
$("#bg").addClass('bg2');
$("#bg").fadeIn(300);
$("#bg").delay(3000);
$("#bg").fadeOut(300);
$("#bg").removeClass('bg2');
$("#bg").addClass('bg1');
$("#bg").fadeIn(300);
});
btw. its not working properly.
HTML:
<div id="bg" class="ShowBG bg1"></div>
CSS:
#bg{
position:absolute;
width:100%;
height:70%;
background-size:cover;
background-position:center;
display:none;
}
.bg1{background-image:url("/img/index/bg1.png");}
.bg2{background-image:url("/img/index/bg2.png");}
Your method should work just fine but it's not the best way to write it: what if your graphic designer suddenly decides to add another background image in the cycle? Your code could become pretty long pretty fast. Here's how I would do it:
var backgroundClasses = ['bg1', 'bg2']; // Store all the background classes defined in your css in an array
var $element = $('.container'); // cache the element we're going to work with
var counter = 0; // this variable will keep increasing to alter classes
setInterval(function() { // an interval
counter++; // increase the counter
$element.fadeOut(500, function() { // fade out the element
$element.removeClass(backgroundClasses.join(' ')). // remove all the classes defined in the array
addClass(backgroundClasses[counter % backgroundClasses.length]). // add a class from the classes array
fadeIn(500); // show the element
});
}, 3000)
.container {
width: 100vw;
height: 100vh;
}
.bg1 {
background-color: red;
}
.bg2 {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container bg1"></div>
The hardest part of the code is this:
$element.addClass(backgroundClasses[counter % backgroundClasses.length])
It basically adds one of the classes stored in the backgroundClasses array. Using the modulo operator (%) on the counter will basically start over every time it has reached the end of the array, counting 0, 1, 0, 1, 0, 1 if you're array is only 2 elements long. If it's 3 elements long it counts 0, 1, 2, 0, 1, 2, ... and so on. Hope that makes sense.
Use callback of fadeOut() method (see complete parameter here) to perform class change when the animation is done. Otherwise the class will swap while the animation is still going.
There is no better way than using setInterval() if you want to do it automatically and continuously.
Here is working example:
$("document").ready(function () {
var bg = $("#bg");
setInterval(function() {
// We fadeOut() the image, and when animation completes we change the class and fadeIn() right after that.
bg.fadeOut(300, function() {
bg.toggleClass('bg1 bg2');
bg.fadeIn(300);
});
}, 1500);
});
#bg {
position:absolute;
width:100%;
height:70%;
background-size:cover;
background-position:center;
}
.bg1 {
background-image: url("https://www.w3schools.com/css/img_fjords.jpg");
}
.bg2 {
background-image: url("https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg" class="ShowBG bg1"></div>
Edit
Just noticed OP wants fading so I added a simple CSS transition and opacity properties to both classes and #bg.
Use toggleClass(). Not sure why you used display:none so I removed it. Also I added the dimensions to html and body so your div has something to relate it's percentage lengths with.
Demo
setInterval(function() {
$('#bg').toggleClass('bg1 bg2');
}, 3000);
html,
body {
height: 100%;
width: 100%
}
#bg {
position: absolute;
width: 100%;
height: 70%;
background-size: cover;
background-position: center;
opacity:1;
transition:all 1s;
}
.bg1 {
background-image: url("http://placehold.it/500x250/00f/eee?text=BG1");
opacity:1;
transition:all 1s;
}
.bg2 {
background-image: url("http://placehold.it/500x250/f00/fff?text=BG2");
opacity:1;
transition:all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg" class="ShowBG bg1"></div>
I want to make a 3D rectangle (parallelepiped) which the users can move with the arrows. It works fine in Chrome, but in Firefox some transitions (a lot actually) are different from Chrome. Look at this fiddle (this is my whole code) and compare it in both browsers to understand better.
Because the first fiddle contains a lot of code, I'll simplify it and pick one random strange transition. Look at this fiddle, and press the "Left" button or the left arrow one time. It works fine, but when you press it again, the rectangle rotates 3 times instead of 1 time.
Is this a Firefox bug or what am I doing wrong?
The code below is what you'll find in the simplified fiddle.
var position = 'show-front';
$('#left').bind('click', function() {
if (position == 'show-front') {
$('#box').removeClass().addClass('show-right');
position = 'show-right';
} else if (position == 'show-right') {
$('#box').removeClass().addClass('show-back-3');
position = 'show-back-3';
} else if (position == 'show-back-3') {
$('#box').removeClass().addClass('show-left');
position = 'show-left';
} else if (position == 'show-left') {
$('#box').removeClass().addClass('show-front');
position = 'show-front';
}
});
$(window).bind('keyup', function(event) {
switch (event.keyCode) {
case 37: // left
$('#left').click();
break;
}
});
.container {
width: 150px;
height: 100px;
position: relative;
margin: 25px auto 25px auto;
perspective: 600px;
}
#box {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
#box figure {
display: block;
position: absolute;
border: 1px solid black;
line-height: 98px;
font-size: 45px;
text-align: center;
font-weight: bold;
color: white;
}
figure {
margin: 0;
}
#box .front,
#box .back {
width: 148px;
height: 98px;
}
#box .right,
#box .left {
width: 48px;
height: 98px;
left: 50px;
}
#box .top,
#box .bottom {
width: 148px;
height: 48px;
top: 25px;
line-height: 48px;
}
#box .front {
background: hsla(000, 100%, 50%, 0.7);
}
#box .back {
background: hsla(160, 100%, 50%, 0.7);
}
#box .right {
background: hsla(120, 100%, 50%, 0.7);
}
#box .left {
background: hsla(180, 100%, 50%, 0.7);
}
#box .top {
background: hsla(240, 100%, 50%, 0.7);
}
#box .bottom {
background: hsla(300, 100%, 50%, 0.7);
}
#box .front {
transform: translateZ(25px);
}
#box .back {
transform: rotateX(180deg) translateZ(25px);
}
#box .right {
transform: rotateY(90deg) translateZ(75px);
}
#box .left {
transform: rotateY(-90deg) translateZ(75px);
}
#box .top {
transform: rotateX(90deg) translateZ(50px);
}
#box .bottom {
transform: rotateX(-90deg) translateZ(50px);
}
#box.show-front {
transform: translateZ(-50px);
}
#box.show-right {
transform: translateZ(-150px) rotateY(-90deg);
}
#box.show-back-3 {
transform: translateZ(-50px) rotateX(180deg) rotateZ(-180deg);
}
#box.show-left {
transform: translateZ(-150px) rotateY(90deg);
}
<section class="container">
<div id="box" class="show-front">
<figure class="front">1</figure>
<figure class="back">2</figure>
<figure class="right">3</figure>
<figure class="left">4</figure>
<figure class="top">5</figure>
<figure class="bottom">6</figure>
</div>
</section>
Based on the assumption that Firefox is just buggy in this regard (see analysis below), here is a workaround that works on Firefox. It wraps the #box element in another div, and only transitions the wrapper. And the wrapper is only ever rotated 90 degrees from the starting point in one direction at a time, so Firefox can't mess it up.
Once the transition finishes, the rotation is reset back to the starting position and simultaneously the inner box is rotated to the new position, both without transition, so the change is not visible.
The second important change is using the current computed transformation of #box and adding the rotation to that, so that we don't have to keep track of the rotations as we go.
Note that the order of rotations matters. To achieve what you're trying to do (rotating in "world space" rather than "object space"), you need to apply the rotations in reverse order. E.g. to rotate "right", use .css("transform", "rotateY(90deg) " + currentComputedTransform). This will resolve the issue you mentioned in comments where it appears to rotate around the wrong axis. See below for more information.
Note also that I don't allow a rotation to start if there's already one in progress, because that won't work. You could queue up keystrokes in an array if you want to be able to that, but you might also want to reduce the transition duration proportional to queue length in that case so it doesn't take forever.
Updated fiddle: https://jsfiddle.net/955k5fhh/7/
Relevant javascript:
$("#box").wrap("<div id='outer'></div>");
var pending=null;
function rotate(axis,angle,dir) {
if (pending) return;
$("#outer").removeClass().addClass(dir);
var current=$("#box").css("transform");
if (current=='none') current='';
pending="rotate"+axis+"("+angle+"deg) "
+ current;
}
$("#outer").bind('transitionend', function() {
$(this).removeClass();
$("#box").css('transform',pending);
pending=null;
});
$('#up').bind('click', function() {
rotate('X',90,"up");
});
$('#down').bind('click', function() {
rotate('X',-90,"down");
});
$('#right').bind('click', function() {
rotate('Y',90,"right");
});
$('#left').bind('click', function() {
rotate('Y',-90,"left");
});
Previous analysis
I've been playing with JS-based solutions and I came across this useful post https://gamedev.stackexchange.com/a/67317 - it points out that to rotate objects in "world space" instead of "object space", you just need to reverse the order of the rotations.
Based on that, I simplified your fiddle to the following:
var rot = "";
var tr = "translateZ(-50px)";
$('#up').bind('click', function() {
rot=" rotateX(90deg)"+rot;
$("#box").css("transform",tr+rot);
});
$('#down').bind('click', function() {
rot=" rotateX(-90deg)"+rot;
$("#box").css("transform",tr+rot);
});
$('#right').bind('click', function() {
rot=" rotateY(90deg)"+rot;
$("#box").css("transform",tr+rot);
});
$('#left').bind('click', function() {
rot=" rotateY(-90deg)"+rot;
$("#box").css("transform",tr+rot);
});
https://jsfiddle.net/955k5fhh/ (note that it's not a complete solution, because eventually the rot string will get too long)
And on Chrome, that behaves as expected. And once again, Firefox gets it wrong, even if you're just chaining e.g. a sequence of rotateX(90deg) transformations.
So I went one step further and rolled up adjacent rotations in the same axis...
var rots = [];
var tr = "translateZ(-50px)";
function transform() {
var tf = "translateZ(-50px)";
rots.forEach(function(rot) {
tf += " rotate" + rot[0] + "(" + rot[1] + "deg)";
});
console.log(tf);
$("#box").css("transform", tf);
}
function addRot(axis,angle) {
if (rots.length==0 || rots[0][0]!=axis) {
rots.unshift([axis,angle]);
} else {
rots[0][1]+=angle;
}
transform();
}
$('#up').bind('click', function() {
addRot('X',90);
});
$('#down').bind('click', function() {
addRot('X',-90);
});
$('#right').bind('click', function() {
addRot('Y',90);
});
$('#left').bind('click', function() {
addRot('Y',-90);
});
https://jsfiddle.net/955k5fhh/2/
Which, again, works well in Chrome, and works a bit better in Firefox, but still once you switch axes, you can wind up spinning the wrong way. And similarly if you click a button before a transition completes, it can spin the wrong way.
So I would conclude that unfortunately yes, Firefox is just buggy in this, but at least there are workarounds.
It looks like you are doing everything right, and the differences in rotation in Chrome vs Firefox is caused by the ways the two browsers process CSS3. When looking at the rotation from show-back-4 to show-top-4, your CSS file specifies the rotation to be 270deg. In Firefox, it does just that. In Chrome, it looks like it optimizes and doesn't do the full rotation, saving on processing power or something. So yeah, I think that it's just a difference in the browsers, not a bug in either one of them.
You could try using keyframes to get more control for the animation, something like this:
https://jsfiddle.net/L36v50kh/2/
I'm defining both starting and ending point for all transitions in the fiddle like this:
#keyframes front-to-right {
from {transform: translateZ(-50px) rotateY(0deg); }
to {transform: translateZ(-150px) rotateY(-90deg);}
}
That looks the same in both browsers but it's jumpy when clicking the button before the animation finishes.
You might also consider animating with JavaScript to get exact control and avoid defining every transition, something like this:
var applyRotation = function() {
$('#box').css('transform', 'rotateY(' + rotateY + 'deg)');
handleMultipleRotations();
};
var unwindTimeout;
var rotateY = 0;
var handleMultipleRotations = function() {
$('#box').css('transition-duration', '');
if (typeof unwindTimeout === 'number') {
clearTimeout(unwindTimeout);
unwindTimeout = undefined;
}
if (Math.abs(rotateY) >= 360) {
unwindTimeout = setTimeout(function() {
rotateY -= Math.floor(rotateY / 360) * 360;
$('#box').css({
'transition-duration': '0s',
'transform': 'rotateY(' + rotateY + 'deg)'
});
}, 1000);
}
};
$('document').ready(function() {
$('#left').on('click', function() {
rotateY -= 90;
applyRotation();
});
$('#right').on('click', function() {
rotateY += 90;
applyRotation();
});
});
/* minified to draw focus to js */ .container{width:150px;height:100px;position:relative;margin:25px auto;perspective:600px}#box{width:100%;height:100%;position:absolute;transform-style:preserve-3d;transition:transform 1s}#box figure{display:block;position:absolute;border:1px solid #000;line-height:98px;font-size:45px;text-align:center;font-weight:700;color:#fff}figure{margin:0}#box .back,#box .front{width:148px;height:98px}#box .left,#box .right{width:48px;height:98px;left:50px}#box .bottom,#box .top{width:148px;height:48px;top:25px;line-height:48px}#box .front{background:hsla(000,100%,50%,.7)}#box .back{background:hsla(160,100%,50%,.7)}#box .right{background:hsla(120,100%,50%,.7)}#box .left{background:hsla(180,100%,50%,.7)}#box .top{background:hsla(240,100%,50%,.7)}#box .bottom{background:hsla(300,100%,50%,.7)}#box .front{transform:translateZ(25px)}#box .back{transform:rotateX(180deg) translateZ(25px)}#box .right{transform:rotateY(90deg) translateZ(75px)}#box .left{transform:rotateY(-90deg) translateZ(75px)}#box .top{transform:rotateX(90deg) translateZ(50px)}#box .bottom{transform:rotateX(-90deg) translateZ(50px)}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div id="box" class="show-front"><figure class="front">1</figure><figure class="back">2</figure><figure class="right">3</figure><figure class="left">4</figure><figure class="top">5</figure><figure class="bottom">6</figure></div>
</section>
<section id="options"><p><button id="left">Left</button><button id="right">Right</button></p></section>