seem to be having issues with my pure css parallax, im using the concept from this article. However this doesn't seem to be working for me at all.
Am I going about it all wrong?
You can inspect my code using a debugger here.
Edit:
Sorry I though providing the link would let you inspect the code easier rather than read and try and understand pasted code snippets.
I want to have parallax effects on sections of my website.
Here you can see my HTML, there are more parts but im currently trying to get my header working with a parallax scrolling background:
<body class="parallax">
<header class="parallax__group">
<div class="parallax__layer parallax__layer--back darken"></div>
<div class="parallax__layer parallax__layer--base flex alignvcenter">
<div id="hdr-logo">
<img src="images/logo.svg" alt="Mobile Paint Solutions" class="responsive-img">
</div>
<div id="hdr-hint">
<img src="" alt="" class="responsive-img">
</div>
<div id="hdr-nav">
<nav>
<span>Home</span>
<span>About</span>
<span>Gallery</span>
<span>Reviews</span>
<span>Pricing</span>
<span>Contact</span>
</nav>
</div>
</div>
</header>
And here are my LESS styles:
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
transform: translateZ(-2px) scale(3);
}
However currently the background is not moving at all, can anyone explain this?
I believe the reason the effect (parallax or not) does not work is because you used <body> as the host element. Probably some of the properties it uses have no effect on <body>. I assume we're talking perspective and its vendor prefixed counterparts.
The obvious fix is to use a <div> as host, not <body>. I tried to use some styles and images from the website you linked, but it doesn't look too good. You got the idea though.
Adding
background-attachment: fixed;
to your
<div class="parallax__layer parallax__layer--back darken"></div>
or actually class named
parallax__layer--back
fixed the thing.
Edit: (http://i.imgur.com/rV1CDho.png) this works, gentleman.
Related
I need to close the gap following a CSS transform: translateY(-50%) so that content flows on naturally.
I have tried other methods but have been unable to move the element up by 50% of its own height. Negative margin as a percentage is based on the height of the window so this doesn't seem like an option, nor can I set a negative margin on the following element as it needs to be based on the height of the header.
HTML:
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
CSS:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
transform: translateY(-50%);
background-color: yellow;
}
JS Fiddle:
https://jsfiddle.net/robertirish/tyh18orq/16/
It may be that this is only possible using Javascript but it would be great to get it done with pure CSS as JS and media queries are a pain to implement.
Thanks in advance.
Instead of using transform: translateY(-50%), use margin-top: -25vh.This will place the .title-container in the same place, yet keep the .article-body flush below it:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
/*transform: translateY(-50%);*/
margin-top: -25vh;
background-color: yellow;
}
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
I am attempting to animate a block of content (collapsing 5 seconds after display), which is working, but I have this artifact where the display: none content after the collapse transition is still affecting layout, even when specifying overflow: hidden.
The code is as follows (and here is the codepen, as I am getting errors in the SO code runner):
setTimeout(() => {
$('#container').addClass('closing')
}, 5 * 1000)
#container {
transition: all linear 0.5s;
margin-bottom: 0rem;
min-height: 4rem;
opacity: 1;
.step {
transition: all linear 0.5s;
& * {
transition: all linear 0.5s;
}
}
&.closing {
min-height: 0rem;
height: 0rem;
opacity: 0;
overflow: hidden;
& * {
overflow: hidden;
min-height: 0rem;
height: 0rem;
padding-top: 0rem;
padding-bottom: 0rem;
}
}
}
#bottom-block {
height: 5rem;
width: 100%;
color: white;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<div id="container" class="ui closing steps">
<div class="completed step">
<div class="content">
<div class="title">Shipping</div>
<div class="description">Choose your shipping options</div>
</div>
</div>
<div class="completed step">
<div class="content">
<div class="title">Billing</div>
<div class="description">Enter billing information</div>
</div>
</div>
<div class="active step">
<i class="info icon"></i>
<div class="content">
<div class="title">Confirm Order</div>
<div class="description">Verify order details</div>
</div>
</div>
</div>
<div id="bottom-block">
Testing
</div>
I have hacked around in the Styles on chrome to see if I can figure out what is causing this, but even when manually removing all the :before and :after pseudo-elements, it is still not fully collapsing.
Any ideas on how to get this to work?
(Note also that I am not using JQuery in the real code, but rather am setting classes through state management in React. Not relevant, just wanted to avoid "Why not use JQuery animations?" replies.)
Update:
Here is the forked codepen with the implemented change from below. Thanks for the help!
Your .ui.steps element has display inline-flex: therefore it's an inline element that is represented by a line box (https://www.w3.org/TR/2007/WD-css3-box-20070809/#line-box.).
It will occupy at least one line-height of vertical space in it's parent element, in this case the body element.
To illustrate that try reducing the font-size and line-height of your body: you'll see the space shrink. Of course hacking font-size is not a good solution, you can't even make it totally disappear because most browser will ignore font sizes of 0.
Edit : as #cmprogram have said, using display: none is usually the best move here.
Also, there is no such thing as display:hidden, I think you are confusing with visibility:hidden
The Problem is located in your
display: inline-flex;
Try using:
display: block;
or
display: flex;
instead.
I have a responsive image list. Each image is inside a container.
I want the image container to be 75% of its first container (unit container in this case)
the image ration is 1:1
I played a little with the image container percentage width but it feels like this is not the solution.
<ul class="list-inline unit_list ">
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8">
<a href='#' alt="unit">
<div class="unit_container">
<div class="icon_container unit_icon">
<img class="img-responsive unit_image" src="http://placehold.it/60X60" />
</div>
<div class="unit_name">FREE</div>
</div>
</a>
</li></ul>
Btw, I'm using bootstrap if that's matter.
http://jsfiddle.net/wmu3w3ej/1/
Thanks to #Mary Melody
transform: scale(0.75);
works like magic
I'm a little afraid to use it since it's so simple.
any thoughts?
Using the logic from here: https://stackoverflow.com/a/20117454/3389737
I have applied it to your situation: http://jsfiddle.net/phwaLmen/1/
#wrapper
{
position: relative;
width: 50%;
overflow: hidden;
}
#wrapper:before
{
content: "";
display: block;
padding-top: 75%;
}
#image
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
<div id="wrapper">
<img src="http://placehold.it/350x350" id="image">
</div>
Add relative positioning to the parent, set its width as you'd like and make sure the overflow is hidden.
Create a :before element for the wrapper with a padding-top of 75%. Since there is no height specified for the #wrapper, this 75% is based on the width of the element :)
Then you have your image, positioned absolutely and then fitted to the container. If you want the image to be cropped instead of resized, remove the height: 100% and width: 100% style rules from it.
You can do it like this (in your html):
<img src="img.jpg" height="75%" />
Good luck!
I made a logo in svg and implemented it on my website. It works well in all browsers EXCEPT safari
Here is a fiddle
NOTE - you muse use safari to recreate my issue. Viewing the fiddle in any other browser shows it like its suppose to be.
Here is my html for the navbar
<div class="navsection">
<div class="w-nav navbar" data-collapse="medium" data-animation="default" data-duration="400" data-contain="1">
<div class="w-container">
<a class="w-nav-brand" href="#">
<img class="logo" src="https://dl.dropboxusercontent.com/u/66131799/JA_logo_2014_svg.svg" width="100">
</a>
<nav class="w-nav-menu mobilenavmenu" role="navigation"><a class="w-nav-link navlinks" href="#work">work</a><a class="w-nav-link navlinks" href="#contact">contact</a>
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu hamburger"></div>
</div>
</div>
</div>
</div>
What is causing this to happen?
You can get started with
preserveAspectRatio="xMinYMin meet" in your svg header
but I cant verify this without your svg on the fiddle
Your css
img {
display: block;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.w-nav-brand {
display: inline-block;
position: relative;
width: 50%;
padding-bottom: 60%;
}
The 60% needs tuning depending on size and width.
I've used this guide a lot, to good effect, but more with the object tag than img.
Try to trim the amount of css included in your fiddle, you'll get more interest!
I was trying to implement the "translateZ" transform function in IE10 preview and came across an issue.
So it only works properly if the "direct" parent of the transformed node has the "-ms-perspective" property and does not work if the parent's parent has got the "-ms-perspective" property set up.
Can anyone suggest if this is a bug and if there is a workaround.
For example it does not work if in the following code I apply "-ms-perspective" to "div1" and try rotateZ on div3 .
<div class="div1">
<div class="div2">
Parent
<div class="div3">
Child
</div>
</div>
</div>
It appears to work just fine for me in Internet Explorer 10.0.8400.0:
<div class="div1">
<div class="div2">
Parent
<div class="div3">
Child Rotated
</div>
</div>
</div>
Along with the following CSS:
.div1 {
margin: 25px 100px;
background: #f1f1f1;
-ms-perspective: 500px;
}
.div3 {
width: 100px;
height: 100px;
background: orange;
-ms-transform: rotateZ(30deg);
}
Produces the following effect:
Fiddle: http://jsfiddle.net/jonathansampson/NKZw6/