We Keep Coding

How to remove scrollbar which is shown on using transform scale?

I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?
HTML:
<div id="pn-head">
</div>
JS:
var i = 1;
function tSlide(){
if(i<=5){
jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
}
i = i+1;
if(i==6){
i=1;
}
}
tSlide();
setInterval(tSlide , 5000);
CSS:
.pn-head{
height: 700px;
background-size: cover !important;
background-repeat: no-repeat !important;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
-webkit-transition: transform 2s ease-out 1s;
-moz-transition: transform 2s ease-out 1s;
-o-transition: transform 2s ease-out 1s;
transition: transform 2s ease-out 1s;
}
.head-bg1{
background: url('../img/b1.png');
transform: scale(1.1);
}
.head-bg2{
background: url('../img/b2.png');
transform: scale(1.2);
}
.head-bg3{
background: url('../img/b3.png');
transform: scale(1.3);
}
.head-bg4{
background: url('../img/b4.png');
transform: scale(1.4);
}
.head-bg5{
background: url('../img/b5.png');
transform: scale(1.5);
}

Add this to remove all scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>

jquery reverse animation on second click

I would like to have a reverse animation on second click, but the second animation must be the opposite of the first but must have the same moviments.
I wrote also in jquery because I want that after click the object stays in the position until I click again.
I hope you understand what I mean. Thank you a lot!
JavaScript:
$('.linguait').click(function() {
if (('.linguait').hasClass('active')) {
$('.linguait').removeClass('active');
$('.linguait').addClass('deactive');
} else{
$('.linguait').removeClass('deactive');
$('.linguait').addClass('active');
}
});
CSS:
linguait.active {
right:25%;
margin-right: -10px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
transition: right 2s, margin-right 2s, transform 2s;
}
.linguait.deactive {
right:5%;
margin-right: -2px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
transition: right 2s, margin-right 2s, transform 2s;
}

Simply change your jquery to use the .toggleClass() wich does your whole thing for you
example:
$('.linguait').click(function() {
$(this).toggleClass("active");
});
And set your standard (deactivated) in the linguait class instead of its own.
linguait.active {
right:25%;
margin-right: -10px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
transition: right 2s, margin-right 2s, transform 2s;
}
.linguait {
right:5%;
margin-right: -2px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
transition: right 2s, margin-right 2s, transform 2s;
}

Update your jQuery:
$(document).ready(function() {
$('.linguait').on('click', function() {
var $el = $(this);
if ($el.hasClass('active')) {
$el.removeClass('active');
$el.addClass('deactive');
} else if ($el.hasClass('deactive')) {
$el.removeClass('deactive');
} else {
$el.addClass('active');
}
});
});
Use CSS-animation:
#keyframes foo {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.linguait.active {
animation: foo 2s infinite linear;
}
.linguait.deactive {
animation: foo 2s infinite linear reverse;
}

Here's a practical solution for a pop-out menu using jQuery 3.4.1 and css keyframe animation.
HTML
<div id="ui-menu-bar">
<div class="ui-menu-bar-red"></div>
<div class="ui-menu-bar-white"></div>
<div class="ui-menu-bar-blue"></div>
</div>
<div id='menu-bg'>
some menu stuffs
</div>
CSS
*{background:#000;}
#ui-menu-bar {position:absolute; width:62px; height:29px; top:26px; left:26px; cursor:pointer;}
#keyframes menu-open{
0% {transform:rotateZ(0deg) scale3d(.5,.5,.5); opacity:0.5;}
100% {transform:rotateZ(360deg) scale3d(1,1,1); opacity:1;}
}
#keyframes menu-close{
0% {transform:rotateZ(360deg) scale3d(.5,.5,.5); opacity:0.5;}
100% {transform:rotateZ(0deg) scale3d(1,1,1); opacity:1;}
}
.ui-menu-bar-red {width:62px; height:5px; background:#ff1800; margin-bottom:7px;}
.ui-menu-bar-white {width:62px; height:5px; background:#fff; margin-bottom:7px;}
.ui-menu-bar-blue {width:62px; height:5px; background:#00a8ff;}
.ui-menu-animate-open{animation: menu-open .6s ease-in-out;}
.ui-menu-animate-close{animation: menu-close .6s ease-in-out;}
#menu-bg {position:absolute; width:20%; padding:40px; background:#515151; color:#fff; top:100px; display:none; text-align:center;}
JS
$("#ui-menu-bar").click(function() {
if ($('#menu-bg').is(":hidden")) {
$('#menu-bg').show(200);
$('#ui-menu-bar').addClass('ui-menu-animate-open');
} else {
if ($('#menu-bg').is(":visible")) {
$('#menu-bg').hide(200);
$('#ui-menu-bar').addClass('ui-menu-animate-close');
}
}
$('#ui-menu-bar').on("animationend", function() {
$('#ui-menu-bar').removeClass('ui-menu-animate-open');
$('#ui-menu-bar').removeClass('ui-menu-animate-close');
});
});
https://jsfiddle.net/v2prkwb9/1/

css3 transition start on click

I want a CSS3 transition to start after click.
Now it works fine if the element gets added a class with jQuery (see span.toggle-nav.two) which knows then what to do.
I've tried with :focus (see span.toggle-nav.one) but that doesn't work. How can I make it work without jQuery?
Please have a look here: http://jsfiddle.net/aE4C7/ clicking on Two works but clicking on One does not.
<span class="toggle-nav one">One</span>
<span class="toggle-nav two">Two</span>
<script type="text/javascript">
$('.toggle-nav.two').on('click',function(){
$(this).addClass("click");
});
</script>
<style type="text/css">
.toggle-nav {
background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8hRiDDs6RJRzelpuFRX2wG5Wx2cQPOBWKYCOmlA2Wr34dx1vv);
background-repeat:no-repeat;
width:50px;height:50px;
display:inline-block;
}
.toggle-nav.one:focus {
-webkit-animation: spin 0.6s infinite linear;
-moz-animation: spin 0.6s infinite linear;
-o-animation: spin 0.6s infinite linear;
-ms-animation: spin 0.6s infinite linear;
}
.toggle-nav.two.click {
-webkit-animation: spin 0.6s infinite linear;
-moz-animation: spin 0.6s infinite linear;
-o-animation: spin 0.6s infinite linear;
-ms-animation: spin 0.6s infinite linear;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(180deg);}
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(180deg);}
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(180deg);}
}
#-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(180deg);}
}
</style>
Is there a way to make this work without jQuery?

To let span getting focus, you need to set tabindex attribute:
<span class="toggle-nav one" tabindex="-1">One</span>
Then you could wish for styling to set CSS outline property too:
outline: none;
DEMO

You can actually do this using purely CSS - The only way to correctly simulate click events in CSS is to fake it with a checkbox, otherwise using :active or :focus will stop any applied transition or animation as soon as the element loses focus, not when it is clicked on again.
Demo Fiddle
HTML
<div>
<input id='box' type='checkbox' />
<label for='box'>Click Me!</label>
</div>
CSS
div {
position:relative;
}
label {
position:absolute;
left:0;
background:white;
}
input[type=checkbox] {
opacity:0;
}
input[type=checkbox]:checked + label {
-webkit-animation: spin 0.6s infinite linear;
-moz-animation: spin 0.6s infinite linear;
-o-animation: spin 0.6s infinite linear;
-ms-animation: spin 0.6s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(180deg);
}
}
#-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(180deg);
}
}
#-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(180deg);
}
}

Responsive menu using trunk js how to make drawer to open right side

hey plz check this responsive menu i want to make the drawer to move right side but i have no idea about css animation can anyone suggest me what to do.
here is fiddle
i try to make the translate3d -240px the drawers move right but navigation is disappear.
header.open,
.content.open
{
-webkit-transform: translate3d(240px,0,0);
-webkit-animation: open .5s ease-in-out;
-moz-transform: translate3d(240px,0,0);
-moz-animation: open .5s ease-in-out;
transform: translate3d(240px,0,0);
animation: open .5s ease-in-out;
}

I needed this as well and made the necessary tweaks and now it works. Some of the changes below but check the fiddle for working code: http://jsfiddle.net/pkxtj9z1/
.burger {
float: right;
right: 10px;
}
nav {
right: 5px;
}
nav li {
text-align: right;
}
header.open,
.content.open
{
-webkit-transform: translate3d(-240px,0,0);
-webkit-animation: open .5s ease-in-out;
-moz-transform: translate3d(-240px,0,0);
-moz-animation: open .5s ease-in-out;
transform: translate3d(-240px,0,0);
animation: open .5s ease-in-out;
}
#-webkit-keyframes open {
0% {-webkit-transform: translate3d(0,0,0);}
70% {-webkit-transform: translate3d(-260px,0,0);}
100% {-webkit-transform: translate3d(-240px,0,0);}
}
#-moz-keyframes open {
0% {-moz-transform: translate3d(0,0,0);}
70% {-moz-transform: translate3d(-260px,0,0);}
100% {-moz-transform: translate3d(-240px,0,0);}
}
#keyframes open {
0% {transform: translate3d(0,0,0);}
70% {transform: translate3d(-260px,0,0);}
100% {transform: translate3d(-240px,0,0);}
}

Is it possible to fade in newly created elements using only css3?

I am working with a chat script. I have no control over any javascript, only CSS. I was wondering if it is possible to get the posts to fade in, as they are added, with only CSS3.
Here is a simplified example of the chat script:
http://jsfiddle.net/CF4pj/1/
<a class="click" href="#/">click</a>
<div class="stuff"></div>
<script>
$("a.click").click(function() {
$("div.stuff").append("<div class='lol'>text text text text text</div>");
});
</script>
Is there any CSS3 (only CSS3, no javascript) I could add to the script above to make the new "posts" fade in?

Here you go...
div.click {
background:yellow;
display:inline;
}
div.lol {
padding:5px;
border:1px solid green;
margin:5px 0;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Check out this fiddle...jsfiddle

You could use something like this:
<code>
.lol {
opacity: 0;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}​
</code>