I'm trying to create a parallax header for my wordpress site, i'm using the divi theme.
Here is my code:
HTML:
<div class="parallax">
<div class="parralax__layer parallax__layer--back">
<img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
</div>>
<div class="parralax__layer parallax__layer--base">
<img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
</div>
</div>
CSS:
.parallax {
perspective: 1px;
height: 25vh;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.parallax__layer {
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
transform-style: preserve-3d;
}
.parallax__layer--base {
transform: translateZ(-1px) scale(2);
}
.parallax__layer--back {
transform: translateZ(-15px) scale(2);
}
My problem is that my header has this seperate scroll bar because it's in its over DIV to the rest of my page, the parallax effect works fine with overflow set to auto, but when I turn it off it breaks the paralax effect.
How do I get the header element to scroll with the rest of my page while still keeping the overflow set to auto?
You can see the problem I'm having here:
https://crispimages.co/home/
you can add the following style rule:
.parallax::-webkit-scrollbar {
display: none;
}
This will solve your problem. But as you can see its vendor prefix dependent. So it will only work in webkit browsers.
Related
In my website, I have a YouTube-style progress bar (a thin line that is fixed to the top of the screen, loading from left to right) and a header over all of the content. Both of these elements have position: fixed.
When the page is finished loading, the progress bar gets opacity: 0. The progress bar has transition: opacity 0.4s, but it's not transitioning, just appearing and disappearing. This is my issue.
Here is an example of the issue: https://codepen.io/anon/pen/ZJNaqJ
Ideally, any solution would involve changing CSS within either .loader-outer or .loader... not #loader-wrapper. This is because I'm pulling in an external progress bar component (I'm using React) and I'd rather not re-implement it if I don't have to.
Thank you!
You can use css3 animation instead. If you want to trigger the animation at a specific event, add a style class name and set the animation attributes there. Then remove the style class name to stop the animation.
.wrapper {
width: 800px;
height: 400px;
background-color: lightblue;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: palevioletred;
z-index: 1;
height: 50px;
}
.loader-outer {
}
.loader-wrapper {
}
.loader {
background-color: lightpink;
height: 10px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
animation-name:opacityAnimation;
animation-iteration-count: infinite;
animation-duration:2s;
}
#keyframes opacityAnimation {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
.content {
background-color: lightgreen;
}
<div class="wrapper">
<div>
<div class="header">
header stuff here
</div>
<div class="content">
body!
</div>
</div>
<div class="loader-outer">
<div id="loader-wrapper">
<div class="loader"></div>
</div>
</div>
</div>
I've been trying for hours how to fix a bug that is happening only on chrome.
There are 2 layers in a wrapper, which are:
Parallax background
Normal content scrolled
i've been doing parallax effect by using translateZ and scale rules, everything works fine on firefox.. but for some reason which i don't know, on chrome it makes the parent wrapper to take a huge size to fit with the scale from the parallax background.
many posts say that this issue can be fixed by adding translateZ(0) or z-index: 0 to the wrapper but yet it doesn't fix my issue. So the code on CSS for parallax looks like this:
#parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
#parallax__layer--back {
transform: translateZ(-50px) scale(56);
background: url("/assets/images/background.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
scroll-behavior: smooth;
}
HTML where parallax should be positioned:
<body>
<div id="parallax">
<div id="parallax__layer--back" class="parallax__layer "></div>
<div class="parallax__layer parallax__layer--base">
<!-- Base Content -->
</div>
</div>
</body>
Background
I need to have an image larger than its container. The idea is to give the users the option to add full-width images to content pages, if they want to.
Problem
I used calc(100vw) with left: 50%; and translateX(-50%). This works perfectly in Chrome and Firefox. However, IE11 and Edge bring a horizontal scroll bar.
Code
HTML
<div>
<img />
</div>
CSS
div {
margin: 0 auto;
width: 400px;
}
img {
display: block;
left: 50%;
position: relative;
transform: translateX(-50%);
width: calc(100vw);
}
Fiddle
Here's an example so you can test and play: https://jsfiddle.net/Cthulhu/nbmy5mjf/1/
Question
How can I remove/hide the scroll bar from IE and Edge?
I thought this happened due to the way the image's position is being calculated. However, I noticed that Firefox and Chrome also show a scroll bar if I remove the display: block; from the image. Any ideas?
use
body {
overflow: hidden
}
or just:
body {
overflow-x: hidden
}
and drop the calc() it isn't doing anything there.
Snippet
body {
overflow: hidden
}
div {
border: 5px solid red;
margin: 0 auto;
width: 400px;
}
img {
display: block;
left: 50%;
position: relative;
transform: translateX(-50%);
width: 100vw;
overflow: hidden
}
<div>
<img src="http://randomrab.com/wp-content/uploads/2015/05/thumpimage.jpg" />
</div>
I have an issue where if I use $animate to add an animate.css infinite animation class to the parent div, here:
<div class="image-wrapper" ng-style="containerStyles">
<div class="image-helper">
<img ng-style="imageStyles" ng-src="{{content}}" />
</div>
</div>
The .image-wrapper div will animate but the image it contains will remain in place until I click the browser or change any CSS value in the inspector. Then the image snaps to where it should be animating and continues animating.
Here are the CSS styles that are also added:
.image-wrapper {
position: absolute;
overflow: hidden;
display: inline-block;
.image-helper {
position: relative;
height: 100%;
margin: auto;
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
}
This also happens if I use events instead of $animate.
Has anyone experienced something similar? Does anyone know a workaraound?
Applying transform-style: preserve-3d; to the parent element fixed this issue. It was not related to $animate.
I am trying to make an opening book animation with CSS transitions similar to a card flip animation except with another card behind it.
When I create a single card flip it works fine in chrome. But if I put it inside a parent div in order to place another card behind it the back of the card no longer shows.
HTML
<div class="scene">
<div class="turncard">
<div class="turncard-front">
<div class="turncard-outside turncard-side">
Front!!!<br/>I don't work
</div>
<div class="turncard-inside turncard-side">
Back!!!<br/>Can you see me?
</div>
</div>
</div>
</div>
CSS
.scene {
margin-left: 200px;
perspective: 6000px;
}
.turncard {
width: 200px;
height: 200px;
margin-top: 50px;
transform-style: preserve-3d;
}
.turncard-front {
height: inherit;
width: inherit;
transition: transform 0.6s;
transform-origin: top left;
}
.turncard-side {
height: inherit;
width: inherit;
position: absolute;
backface-visibility: hidden;
background-color: green;
text-align: center;
}
.turncard-outside{
z-index: 1;
}
.turncard-inside {
transform: rotateY(180deg);
z-index: -1;
}
.turncard-front:hover {
transform: rotateY(180deg);
}
Both the working version (without a parent div) and non-working example (with the div) are shown in this fiddle: http://jsfiddle.net/bxLa4kwu/1/
Stick this property on .turncard2-front:
transform-style: preserve-3d;
http://jsfiddle.net/bxLa4kwu/3/
This property tells it to preserve the 3D position of children of the turncard2-front element (e.g. inside and outside of the page) when turncard2-front is css transformed.
Be aware this doesn't work in IE11 as the property isn't supported (but you probably knew that as the first example doesn't work either in IE).