I am trying to create a subtle parallax effect on a background image inside a div. I have used the following markup and CSS..
HTML
<div class="widget bg-parallax" style="background-image: url(~~set dynamically~~)"></div>
CSS
.widget {
height:500px;
position: relative;
}
.bg-parallax {
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
But this creates a background image that is fully stationary as the page scroll.
I would like for the background to scroll but at a much slower rate than the page.
Is this achievable with pure CSS? If not, can anyone point me in the right direction with JS/jQuery.
There are a couple ways you can do this. Yes, it is achievable with pure CSS.
.forefront-element {
-webkit-transform: translateZ(999px) scale(.7);
transform: translateZ(999px) scale(.7);
z-index: 1;
}
.base-element {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.background-element {
-webkit-transform: translateZ(-999px) scale(2);
transform: translateZ(-999px) scale(2);
z-index: 3;
}
This controls the height. The negative Z values make it go slower when scrolling.
Look at this code in w3schools.com, yours is slightly different http://www.w3schools.com/howto/howto_css_parallax.asp
Related
I want to make animation for my logos as in https://stripe.com/us/customers .
Maybe animation without shaking. But circles must go to the left side and spawn into right side again. I saw that div must be over screen size (at the site it have 3000px). I don't have any code, but any ideas is welcome
If it have js code, how I can do it with React
If you want an easy and fast CSS-only solution:
Create an image with all your logos on it. Make it a nice grid of logos so that the image can be horizontally repeated. Animate the background position.
#keyframes scrollbg {
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1500px, 0, 0); /* width of the image */
}
}
.banner-wrapper {
overflow: hidden;
}
.banner {
height: 300px;
width: 4500px;
background: url("https://picsum.photos/g/1500/300?image=2") repeat-x;
animation: scrollbg 35s linear infinite;
}
<section class="banner-wrapper">
<div class="banner"></div>
</section>
Wordpress site using Bootstrap framework
.test {
position: absolute;
z-index: 9;
left: 50%;
height: 10em;
width: 10em;
margin-left: -5em;
background-size: cover;
opacity: 0;
transition: opacity 0.5s ease;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.linkage:hover + .test {
opacity: 1;
}
<div class="row">
<div class="col-md-12 indx-img" style="background-image:url('...');">
Link
<div class="test"> Test </div>
</div>
</div>
Right now my site has the div 'test' show up (opacity 1) vertically/horiz centred when the the link 'linkage' is hovered on (linkage is 100% height and width of the container).
I want to animate the 'test' div as it fades in on hover. I was thinking using scale (on hover the div scales down to its original size then scales up on fade out) or something. Unless anyone has a cooler idea
It seems like you are looking for something like the below snippet (a transition and not animation). On hover of the link, the .test is being scaled up two times its original size both along X and Y axes and on mouse out it is brought back to its normal size.
.test {
position: absolute;
z-index: 9;
left: 50%;
top: 50%; /* added as I think this was missed in your code */
height: 10em;
width: 10em;
margin-left: -5em;
background-size: cover;
background: url(http://lorempixel.com/500/500); /* added for image */
opacity: 0;
transition: all 0.5s ease; /* modified to transition all property changes */
/* added to scale up the div with the center as the origin */
transform-origin: 50% 50%;
transform: translateY(-50%) scaleX(2) scaleY(2);
}
.linkage:hover + .test {
opacity: 1;
transform: translateY(-50%) scaleX(1) scaleY(1); /* bring back to normal state */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="row">
<div class="col-md-12 indx-img" style="background-image:url('...');">
Link
<div class="test">Test</div>
</div>
</div>
Alternately, you could use matrix transforms also. Equivalent of translateY(-50%) scaleX(2) scaleY(2) would be matrix(2, 0, 0, 2, 0, -101) and that of translateY(-50%) scaleX(1) scaleY(1) would be matrix(1, 0, 0, 1, 0, -101).
Well this will never be true:
.linkage:hover + .test {
opacity: 1;
}
as linkage (hovered or not) is not a sibling of test.
.test is absolutely positioned, but has no parent element that is not static. Did you want to to be absolute to the body? You use left/margin to horizontally center, and it looks like you are trying to use translateY to vertically center, but you never specify top. Perhaps consolidating to one method?
top:50%; left:50%; transform: translateX(-50%) translateY(-50%);
I had a button that rotated text along the Y axis , giving it a mirrored look. This no longer works for some reason because the button has been placed on the child (popup) and the text to be mirrored is on the parent.
Is there a javascript function i could use to rotate the text on the parent when a button is clicked / rotate it back when its clicked again. (preferably a toggle switch)
This is what I originally had when it was only one the parent page:
HTML link :
<li><a class="button small icon-text-height flipx" href="#" onclick="return false;"></a></li>
The CSS for the div with the text:
article .teleprompter
{
padding: 300px 50px 1000px 100px;
font-size: 30px !important;
line-height: 86px;
z-index: 1;
background-color: #141414;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
The CSS for the flipx part:
article .teleprompter.flipx
{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
z-index: 1;
pointer-events: none;
padding: 300px 50px 1000px 100px !important;
}
JS I Think should work:
<script>
function flipTXT(color)
{
if (parent_window && !parent_window.closed) {
parent_window.document.getElementById("teleprompter").style['-webkit-transform'] = rotateY(180deg);
}
}
</script>
I think one of the two solutions seen in the code at Bin below may work for you:
http://jsbin.com/buqexusamuda/1/
HTML
<p>Card: Flip</p>
<div class="card" href="#">Hello</div>
<p>Card 2: Mirror</p>
<div class="card card2" href="#">Hello</div>
CSS
.card, .card2 {
position: relative;
animation: all 2.5s;
perspective: 1000;
transition: 0.6s;
transform-style: preserve-3d;
width: 90px;
height: 32px;
text-align: center;
line-height: 32px;
z-index: 1;
background-color: #ccc;
color: #666;
}
.card2 { transform-origin: right center; }
.card.flip { transform: rotateY(180deg); }
SCRIPT
jQuery(".card").click(function(){
$(this).toggleClass("flip");
});
The simplest solution would be to use jQuery to add/remove the classes. If you can include jQuery, then you can do something along these lines:
<script>
$(document).ready(function(){
//Since the text is on the parent, you need to access it.
var parentWindow = window.opener;
//This gets the parent's DOM so you can grab the text from the parent window.
var parentDom = parentWindow.document;
//This grabs the text you want to transform.
var targetText = parentDom.getElementsByClassName("teleprompter");
//This toggles the class
$(".button").on('click', function(){
$(targetText).toggleClass("flipx");
});
});
</script>
I used a combination of jQuery and regular javascript so you don't have to roll your own code to add/remove and check for classes.
Here's the code to include jQuery in your page in case you don't have it handy:
This one will work with older non-HTML 5 compliant browsers and modern browsers.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This one will only work with more modern browsers:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have problem with zooming on my webpage. I have bind on mouse wheel, to do dynamic zooming with mouse. Main element with background is about 4000px. Here is screenshot, how it looks like:
When I want to zoom out, to see a whole element, everything is messed (context menu dissapear, background-image is lost...). Here is screenshot on zoom out:
Thats is CSS on actual element:
element.style {
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate(-50%, -50%) translate3d(3145px, 1463.6364px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(5) scaleY(5) scaleZ(1);
width: 1437.5561545372866px;
height: 800px;
cursor: inherit;
}
.bg-slide {
background-color: transparent!important;
background-image: none!important;
z-index: -2;
border: 0!important;
}
It must be chrome issue, but I don't know where, because it works well in firefox, screenshot from ff:
When executing JQueryUI's slide transition on an element with a CSS transform the top half of the element is being hidden during the animation. Is there some way I can adjust my JQueryUI animation and/or CSS to prevent this from happening?
JSFiddle: I've created a JSFiddle with the appropriate code - http://jsfiddle.net/9dTkL/4/
To accomplish the vertical centering, I do the following:
<style>
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
</style>
The top and transform within the CSS allow the banner to fall into the center.
To perform the animation, I execute the following:
$('#banner-welcome').toggle(
'slide',
function()
{
document.location.href = "#/" + destination;
}
);
When the animation starts the top half of the #welcome-banner disappears, and the bottom half animates. I've removed the transform from the CSS and everything works great -- except that my banner is no longer centered.
I am performing the vertical centering this way due to a combination of AngularJS and ng-views. I had previously used JavaScript to center the element, but adding the logic to the $(window).resize() event caused problems in other ng-views. I needed a way to isolate this to the specific ng-view.
Is there something I can adjust with my animation or CSS that would not cause the top half of the banner to disappear?
toggle is removed as of 1.9: http://api.jquery.com/toggle-event/
so please use animate or slideDown or slideUp method
also the transform property doesn't need prefixes
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
have you tried adding transform-origin property
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform-origin: 50% 50% 0;
transform: translateY(-50%);
}
im not seeing the top part disappear in latest Firefox 24