Scrolling when using css scale - javascript

I have a problem with css and I have to admit that I am just learning it.
I have a header that stays at the top and a "content" area that should be scrollable.
Here are the two css classes:
body,
div {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
width: 100%;
height: 100%;
}
#header {
overflow: auto;
position: absolute;
width: 100%;
height: 200px;
background-color: #DEE7F2;
border-width: 2px;
border-bottom-width:2px;
border-bottom-color:Black;
border-bottom-style: solid;
}
#main {
overflow: auto;
position: absolute;
top: 200px;
width: 100%;
bottom: 0;
}
<body>
<div id="header">
some stuff here
</div>
<div id="main">
a lot of stuff here
</div>
<body>
This works fine though. Now I added a drop down to select the scale of the "content area" because the content will be quite large.
This is the CSS class that I add to the main div to have the scale of 10%:
.scale10 {
-ms-transform: scale(0.1);
-moz-transform: scale(0.1);
-o-transform: scale(0.1);
-webkit-transform: scale(0.1);
transform: scale(0.1);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
This is how the page look like in 100% scale (without the additional class)
As you can see the page is scaled but is not using the whole width of the screen. Also, the scrollbars do not use the whole width... I want the main page to use the full width thats why I used the "width: 100%" statement in the main class. I tried to remove the statement but then the scrollbars are missing...
What I want is to scale the main-div but leave the width at 100% so that the image uses the whole screen. Also I want scrollbars because the content will still be larger then the screen - even with a scale of 10%.
Can some CSS god help me please?

This should do your effect:
JSFIDDLE
You simply have to wrap your content in another container, and you place this container in your main area. Then you scale not your main area, but just your content.
body,
html {
height: 100%;
}
#main {
width: 100%;
height: 100%;
background-color: black;
overflow: auto;
}
.content {
width: 500px;
height: 400px;
margin: 0 auto;
background-color: white;
transition: all 1s ease;
-webkit-transition: all 1s ease;
}
.content:hover {
width: 120%;
}
<div id="main">
<div class="content"></div>
</div>
Added a hover state just for demonstration.

Related

Sliding hero image off-screen with a button click?

I'm creating a portfolio site that has a filterable infinite wall gallery underneath a hero image that slides off to the right when you click (and slides back on screen with another click). I'm having trouble though, getting this sliding image to work correctly. The photo gallery will be a headache for another day.
There will be a small right arrow button on the left side. To make this slider more obvious I'd like to animate a slight right-left bounce of the image when you hover over this image, then when you click the arrow (or would probably be better to click anywhere on the pic) it slides off screen to the right, revealing this photo gallery underneath. Then you can slide this image back over the gallery with another arrow button on the right.
I found a solution that's most of the way there, using a label input checkbox with a transition property to get it to show as default and animate off screen with the arrow click, but it slides down, not right. It's a little wonky, and I feel like it could be simplified to some degree.
I also tried changing the input from a checkbox to a button and doing animation keyframes, but the animation only played on refresh, and disappears/reappears instantly with no animation with a button click. I may have just targeted the wrong element though.
This is a very rough ideas as to what I'm going for, just thrown together in XD. Final design will be much more pleasant. I forgot the arrow on the second screen, but there'd be one on the right side of the screen to slide that hero image back over the gallery.
If this could be done in just HTML and CSS that'd be great, but if I need to use js or jQuery to do this properly then that's fine.
This is what I have currently that needs some serious work:
<section>
<div class="pv-wrapper">
<h1>PHOTO + VIDEO</h1>
<div class="btn-container">
<ul>
<li class="automotive">Automotive</li>
<li class="video">Video</li>
<li class="portraits">Portraits</li>
<li class="landscapes">Landscapes</li>
</ul>
</div>
<label class="slider">
<img class="arrow" src="images/right-arrow.png">
<input type="checkbox" name="">
<div class="photo-slider"></div>
</label>
</div>
</section>
.pv-wrapper {
width: 100%;
height: 750px;
position: relative;
border-left: 100px solid orange;
color: rgba(0, 0, 0, 0.5);
font-size: small;
display: inline-block;
}
.pv-wrapper h1 {
font-size: 50px;
color: white;
text-transform: uppercase;
letter-spacing: 3px;
position: absolute;
bottom: 225px;
left: -40px;
margin-left: -30px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
.btn-container ul {
display: inline-block;
padding: 50px 0 0 50px;
font-family: 'Poppins-Light';
font-size: 40px;
line-height: 120%;
}
.btn-container ul li a {
text-decoration: none;
color: black;
}
.btn-container ul li a:hover {
color: #68C8E5;
transition: 0.4s ease;
}
.slider {
margin-left: -20px;
}
.arrow {
width: 20px;
margin-top: 90px;
}
.slider > input {
display: none;
}
.slider > input:not(:checked) ~ .photo-slider {
top: 100px !important;
}
.photo-slider {
position: fixed;
height: 750px;
width: 100%;
top: 100%;
left: 100px;
background: url(../images/rs3-bg.jpg);
background-size: cover;
background-position: 75% 50%;
transition: 0.6s;
}
[1]: https://i.stack.imgur.com/nob93.jpg
Got it to work thanks to #MonsterBasket! Had to make a couple slight changes but this is what worked, including the bounce on hover:
.slider {
margin-left: -20px;
cursor: pointer;
display: inline-block;
}
.photo-slider {
position: fixed;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-delay: 0.5s;
}
.photo-slider:hover {
animation-name: bounce;
}
#keyframes bounce {
0%, 100%, 20%, 50%, 80% {
transform: translateX(0)
}
40% {
transform: translateX(30px)
}
60% {
transform: translateX(15px)
}
}
.slider > input {
display: none;
}
.slider > input:not(:checked) ~ .photo-slider {
top: 100px;
}
.slider > input:checked ~ .photo-slider {
left: calc(100% - 60px);
top: 100px;
}
.arrow {
width: 60px;
margin-top: 345px;
}
.slider > input:not(:checked) ~ .photo-slider .arrow {
transform: rotate(-360deg);
transition: 1s;
}
.slider > input:checked ~ .photo-slider .arrow {
transform: rotate(-180deg);
transition: 1s;
}
.photo-slider {
position: fixed;
height: 750px;
width: 100%;
top: 100%;
left: 100px;
background: url(../images/rs3-bg.jpg);
background-size: cover;
background-position: 75% 50%;
transition: 0.6s;
}
The reason you need a checkbox rather than a button is because pure CSS doesn't record state. So even though you can make a button play an animation on click, you can't set it as "clicked" so that you can then "unclick" it.
In .slider > input:not(:checked) ~ . photo-slider you're saying "when this is not clicked, be 100px from the top. .photo-slider is less specific, so there you're saying "when the above rule doesn't apply, be 100% from the top (off the bottom of the screen". All the other attributes aren't specified in the above rule, so they'll always be applied.
To make it slide off to the right, you just need to play with where and how you list those properties. I don't know exactly how you want to position it within the rest of your page, but I think this should get you most of the way there:
.slider > input:not(:checked) ~ .photo-slider {
left: 0px; /* This will put it hard left when unchecked, you also don't need !important, as this rule is more specific than the one below.*/
}
.photo-slider {
position: fixed;
height: 750px;
width: 100%;
top: 100px;
left: calc(100% - 20px); /* this will leave 20px sticking out from the right side of the screen */
background: url(../images/rs3-bg.jpg);
background-size: cover;
background-position: 75% 50%;
transition: 0.6s;
}
You can probably also change this:
<label class="slider">
<img class="arrow" src="images/right-arrow.png">
<input type="checkbox" name="">
<div class="photo-slider"></div>
</label>
To this:
<label class="slider">
<input type="checkbox" name="">
<div class="photo-slider">
<img class="arrow" src="images/right-arrow.png">
</div>
</label>
Which will keep the arrow on top of your hero image. You'll have to figure out the CSS to position it yourself, but then you could do this to change the direction of the arrow:
.slider > input:not(:checked) ~ .photo-slider .arrow {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
As for making it bounce on hover, this explains perfectly. Your CSS rule would be .photo-slider:hover.

How to remove shaking from overflow css animation?

I'm currently doing a React app which shows what music I'm listening at that time. Obviously some of song names, album name etc. are longer than others so I want to show overflowing part with animation. I managed to do this and it's kinda okay. Longer text scrolls nicely but my problem is it also animates short texts and that causes some shaking on them during the animation.
Any ideas how to remove that shaking? Also Javascript based solutions are appreciated but this seemed to be shorter solution.
div {
width: 100px;
border: 1px solid black;
}
div p {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
min-width: 100%;
animation: 5s linear 0s infinite alternate scrolltext;
}
#keyframes scrolltext {
0%,
25% {
transform: translateX(0%);
left: 0%;
}
75%,
100% {
transform: translateX(-100%);
left: 100%;
}
}
<div>
<p>This is a very long text and rolls nicely</p>
<p>And these</p>
<p>two shaking?!</p>
</div>
use margin-left and margin-right instead of left and right
div {
width: 100px;
border: 1px solid black;
}
div p {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
min-width: 100%;
animation: 5s linear 0s infinite alternate scrolltext;
}
#keyframes scrolltext {
0%,
25% {
transform: translateX(0%);
margin-left: 0%;
}
75%,
100% {
transform: translateX(-100%);
margin-left: 100%;
}
}
<div>
<p>This is a very long text and rolls nicely</p>
<p>And these</p>
<p>two shaking?!</p>
</div>

Responsive Double Overlay for Masonry

I am trying to get my responsive Masonry to work with double overlay in WordPress. Currently, I have managed to get the dark overlay size match perfectly with the thumbnail image. I have also added texts which appears on top of the overlay, hence double overlay on a thumbnail.
The issue is that when I resize the window or view the blog posts through mobile, the overlay hover size exceeds the thumbnail size whiles on some thumbnails the overlay position is completely off.
How do I ensure that the double overlays (black transparent hover and texts) stay in the same position and scale properly along with the thumbnail?
Here is my code:
.title, .excerpt, .date {
position: absolute;
z-index: 1;
}
.title {
bottom: 150px;
}
.date {
bottom: 130px;
}
.excerpt {
bottom: 100px;
}
.overlay:after {
content: '';
position: absolute;
width: 362px;
height: 362px;
top: 5px;
left: 1;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.overlay:hover:after {
opacity:1;
}
Update: I have also added overlay into my media queries but it doesn’t take the overlay into effect like my thumbnails do.
Update 2: Dantcho's code fixes the issue to make the overlay responsive with the thumbnail. The next issue is that because the overlay is set to 100%, when I use padding: 10px; it makes the grid bigger, but I can't make it smaller. The thumbnail has padding, and I'd like to keep the padding that way.
Update 3: Not sure if this is viable fix for long term but either way, it works. This will keep the overlay responsive, and I adjusted the top, left, width and height a little bit to fit over the thumbnail.
.overlay:after {
content: '';
position: absolute;
width: 97.5%;
height: 97.5%;
top: 5px;
left: 5px;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Update 4: I found a better alternative, this will prevent the overlay going slightly out of place when resizing the browser.
.overlay:after {
content: '';
position: absolute;
display: block;
height: calc(100% - 10px);
width: calc(100% - 10px);
top: 5px;
left: 5px;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Cheers!
Change this:
.overlay:after {
content: '';
position: absolute;
width: 362px;
height: 362px;
top: 5px;
left: 1;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
to this:
.overlay:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Hope this fixes your issue. If not feel free to ask!

How to make a moving trail for an image transition in css?

I'm trying to create a before/after effect of a paper being scanned by the printer (with the bright light that moves vertically across the page).
I got the transition right that animates on mousemove and mouseleave, I got the light moving across the page but I can't get them to sync.
div.beforeandafter{ /* main container */
background: white;
border: 1px solid gray;
display: block;
width: 600px; /* width of largest image width */
height: 400px; /* height of largest image height */
overflow: hidden;
position: relative; /* important */
}
div.before, div.after{ /* before and after DIVs within main container */
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
overflow: hidden;
transition: all 1s ease-in-out; /* CSS transition. */
z-index: 100;
}
div.after{
z-index: 1; /* z-index of after div should be smaller than before's */
}
div.beforeandafter:hover div.before{ /* onmouseover main container */
width: 0; /* change "before" div width to 0 to hide it */
}
.scan_light {
will-change: transform;
animation: xAxis 5.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
position: absolute;
bottom: 0px;
left: 0px;
}
.scan_light:after {
content: '';
display: block;
will-change: transform;
width: 20px;
height: 400px;
background: radial-gradient(
rgba(100,145,42,.1) -200%, rgba(163,240,63,.4) 35%, rgba(100,145,42,.3) 60%, rgba(189,91,87,0) 90%);
border-radius: 20px;
}
#keyframes xAxis {
50% {
animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
transform: translateX(600px);
}
}
<div class="beforeandafter">
<div class="before">
<div class="scan_light"></div>
<img src="http://i.imgur.com/AcguNYH.png" />
</div>
<div class="after">
<img src="http://i.imgur.com/nJS8vhv.png" />
</div>
</div>
Thanks, here is the the pen just in case:
http://codepen.io/anon/pen/JRvXVE

CSS/Jquery: Peel corner on hover and fold in half on click

Saw this cool 3x3 grid on this site and cant seem to re-create the animation it has.
The image folds a bit on hover and folds completely in half on a click.
Reference: http://doyouimpress.com/
I've tried doing something similar in CSS however the :active psuedo selector won't open the page completely unless you hold click. Would I only be able to re-create this animation w jquery?
Here's what I've done so far (webkit only): http://jsfiddle.net/JDH9/4wrnf/8/
HTML
<div id="container">
<div id="test">
<div id="left"></div>
<div id="center"></div>
</div>
CSS
#container {
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -100px;
-webkit-perspective: 1000;
}
#test {
position: relative;
}
#test div {
width: 200px;
height: 400px;
}
#left {
background: grey;
z-index: 3;
-webkit-transform-origin: 0% 50%;
-webkit-transition-delay: 1s;
}
#center {
background: grey;
z-index: 1;
}
#left {
position: absolute;
top: 0;
left: 0;
-webkit-transition-duration: 2s;
}
#test:hover #left {
-webkit-transform: rotateY(-45deg);
-webkit-transition-delay: 0s;
}
#test:active #left {
-webkit-transform: rotateY(-180deg);
-webkit-transition-delay: 0s;
}

Categories