I'm working on, when I click on an element, an overlay is opened with a content inside, but I'd like to add a transition effect to it.
Here's my JavaScript code:
(function($)
{
$('.overlay-trigger').click(function(e)
{
e.preventDefault();
$('#expose-mask').css({'display': 'inherit'}).fadeIn(function()
{
$('.overlay-box').css({'display': 'inherit'});
});
});
$('#expose-mask, .overlay-box').css({'display': 'none'});
$('.overlay-box-closer, #expose-mask').click(function()
{
$('.overlay-box, #expose-mask').css({'display': 'none'});
$('#expose-mask');
});
})(jQuery);
.overlay-trigger class means the activator of the overlay when I click on an element, #expose-mask means the background when the overlay is opened and the .overlay-box class means the content inside the #expose-mask id when it is open.
I'd like something like this, on this site: http://tympanus.net/Development/ModalWindowEffects/
I'd like to have the "Slide in (bottom)" effect.
I don't use the same code as on this site, so I don't know how. Here's my HTML code:
<a id="help" class="overlay-trigger" href="help.php">Help</a>
<div class="overlay-box">
<div class="overlay-box-container">
<span class="overlay-box-closer" title="Close the overlay"></span>
<h1 class="big-title">Help</h1>
<p>Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.</p>
</div>
my CSS code:
.overlay-box
{
background-color: #FFFFFF;
position: fixed;
top: 35%;
right: 0;
left: 0;
z-index: 4;
width: 70%;
margin: 0 auto;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
}
.overlay-box-container
{
margin: 20px;
}
.overlay-box-closer:before
{
content: "\f00d";
position: absolute;
top: -21px;
right: -15px;
cursor: pointer;
font-size: 40px;
}
#expose-mask
{
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
}
Live preview here: http://nextgenfocus.com/test1/ Click the "Help" text in the footer to open the overlay.
Thanks.
Try this :
(function($)
{
$('.overlay-trigger').click(function(e)
{
e.preventDefault();
$('#expose-mask').show();
$('.overlay-box').slideDown("slow");
});
$('#expose-mask, .overlay-box').hide();
$('.overlay-box-closer, #expose-mask').click(function()
{
$('.overlay-box, #expose-mask').hide();
});
})(jQuery);
css transition::
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
css animation:
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
add to your .overlay-box:
-webkit-animation-name: fadeInUp;
-webkit-animation-fill-mode: flash;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: fadeInUp;
-moz-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
animation-name: fadeInUp;
animation-fill-mode: both;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
Related
All works properly, but I want to show a spinner loading instead of text. This is my code in Page.js.coffee:
jQuery ->
if $('.pagination').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
$('.pagination').text("Fetching more...")
$.getScript(url)
$(window).scroll().
This line show the text:
$('.pagination').text("Fetching more...")
Thank you guys.
Perhaps css #keyframes suits just fine for your case, you can check possible implementation here https://projects.lukehaas.me/css-loaders/
for example you can take
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
}
.loader {
color: #ffffff;
font-size: 11px;
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before,
.loader:after {
position: absolute;
content: '';
}
.loader:before {
width: 5.2em;
height: 10.2em;
background: #0dc5c1;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.loader:after {
width: 5.2em;
height: 10.2em;
background: #0dc5c1;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
#-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
and then in your coffescript just add and remove the class "loader" loading div, or add/remove div with such a class.
<div class="loader">Loading...</div>
I created a landing page where an image will fade on into the screen, then a user can press the arrow, and it will bring them to a different page with more content.
What my goal is, is to get it so that when the user presses the button, the new page slides in to view.
I found an example of what I wanted here: https://tympanus.net/Development/PageTransitions/
I would like to use the "Move to left / from right" transition.... I tried downloading the source file from this website and figuring out how to implement their code into mine, but I was really confused... Does anyone have any suggestions as to how to get this transition to work? I would like to keep it strictly HTML/CS/Java/JQ....
Thanks
* {
margin: 0;
padding: 0;
}
.fade-in {
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#keyframes animationFrames {
0% {
opacity: 0;
transform: translate(0px, -25px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
#-moz-keyframes animationFrames {
0% {
opacity: 0;
-moz-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-moz-transform: translate(0px, 0px);
}
}
#-webkit-keyframes animationFrames {
0% {
opacity: 0;
-webkit-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-webkit-transform: translate(0px, 0px);
}
}
#-o-keyframes animationFrames {
0% {
opacity: 0;
-o-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-o-transform: translate(0px, 0px);
}
}
#-ms-keyframes animationFrames {
0% {
opacity: 0;
-ms-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-ms-transform: translate(0px, 0px);
}
}
#showcase {
background-image: url('https://images.freecreatives.com/wp-content/uploads/2016/03/Cute-Purple-Background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
}
#showcase h1 {
font-size: 6vw;
color: #fff;
font-family: passion one;
letter-spacing: 4vw;
margin-left: 4vw;
text-shadow: 2px 2px 3px #000;
}
#showcase h2 {
font-size: 2.5vw;
line-height: 2vw;
color: #fff;
font-family: passion one;
text-shadow: 2px 2px 3px #000;
}
#showcase .button {
font-size: 18px;
text-decoration: none;
color: white;
padding: 10px 20px;
border-radius: 10px;
margin-top: 100px;
background-color: darkgreen;
text-shadow: 2px 2px 3px #000;
}
#showcase .button:hover {
background-color: green;
color: #fff;
}
.hiddendiv {
display: none;
width: 300px;
height: 300px;
background-color: green;
}
.button:focus+.hiddendiv {
display: block;
margin-left: 100px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="wrapper fade-in">
<header id="showcase">
<div id="background">
<h1>TITLE</h1>
</div>
<h2>2017</h2>
<i class="fa fa-angle-double-right" style="font-size:36px"></i>
</header>
I implemented something similar using this jQuery plugin...
http://joaopereirawd.github.io/animatedModal.js/
As you can see in the plugin documentation, you can have your new window content already created and when you click the arrow button, the plugin will make it appear using the animation you selected.
In my case I need the new window content to be generated dinamically the button is pressed, so I create a click event in that button that generates all the new window content inside of a div (and a new link that will be responsible of really triggering the animated modal), and append all to the DOM. Then I create the animatedModal element associated to the generated div, and trigger the click event in the new link with the click() function.
For your case (include the css and javascript files following the following the plugin documentation)...
HTML:
<a id="linktonewwindow" href="#newwindow" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a>
<div id="newwindow">
<!-- IMPORTANT. Create the element to close the window!!! -->
<button class="close-newwindow"><i class="fa fa-stop fa-fw" aria-hidden="true"></i></button>
<div class="yournewwindowcontent">
<!-- Put your new window content here-->
</div>
</div>
JQUERY:
$("#linktonewwindow").animatedModal({
modalTarget:'newwindow',
animatedIn:'bounceInLeft', // Choose the animations you prefer
animatedOut:'bounceOutLeft',
color:'#999999', // Background color of the new window
beforeOpen: function() {
},
afterOpen: function() {
},
beforeClose: function() {
},
afterClose: function() {
}
});
I hope it helps
How do I get the white outline out of this button?
Here's the CSS, tell me if you think something caused it.
.btn {
background: linear-gradient(45deg, rgba(51, 197, 230, 0.5) 0%,rgba(51, 230, 131, 0.5) 50%,rgba(108,0,153,0.65) 100%);
border-radius: 10px;
width: 1315px;
color: #fff;
font-size: 18px;
letter-spacing: 1px;
padding: 16px 32px;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}
#-webkit-keyframes hvr-bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
#keyframes hvr-bob {
0% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
#-webkit-keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
#keyframes hvr-bob-float {
100% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
}
.btn {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.btn:hover, a.btn:focus, a.btn:active {
-webkit-animation-name: hvr-bob-float, hvr-bob;
animation-name: hvr-bob-float, hvr-bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}
The above commenters are correct-- border: none and outline: none would be good starts. Remember that the browser itself has some default styles-- if you want to override them before you start trying to style I'd recommend investigating a CSS Reset. Also, is your .btn classed element a div, or a true button? If the latter, remember native form elements are difficult to style appropriately cross browser, so if the visual treatment is important, you should consider using a div and an event handler.
I am trying to put together a fallback in Internet Explorer for hovering over an element.
In Chrome, the element pops and looks neat but not in IE :(
Currently there is a time delay before the background colour appears.
I'm guessing -webkit-animation-name is the root of my issue.
http://jsfiddle.net/8j249sre/
<div class="effects">
<a class="hvr-pop" href="#">Pop</a>
</div>
/* Pop */
#-webkit-keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
.hvr-pop {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
-webkit-animation-name: hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
Adding this to my .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { resolved my issue :-)
-ms-animation-name:none;
I need to create a loading spinner, at the moment I am using the following code.
I would like to know if is possible to rewrite it using an alternative syntax for keyframes (maybe transitions?).
Unfortunately I am using a build tool which rewrite keyframes properties adding bugs and the CSS generated is not working so I would like to work around the problem.
A JS solution is also possible, adding CSS inline.
.loadingSpinner {
width: 50px;
height: 50px;
border: 5px solid #3498db;
border-top-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
-moz-animation: loadingSpinner 0.7s infinite linear;
-o-animation: loadingSpinner 0.7s infinite linear;
-webkit-animation: loadingSpinner 0.7s infinite linear;
animation: loadingSpinner 0.7s infinite linear;
}
#-moz-keyframes loadingSpinner {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes loadingSpinner {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
#-webkit-keyframes loadingSpinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes loadingSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loadingSpinner"></div>
You could use a very long transition and trigger it with a quick js line.
For example, add a .start class that triggers a 60 second transition that rotates the spinner several times (for example, 36000deg).
.loadingSpinner {
width: 50px;
height: 50px;
border: 5px solid #3498db;
border-top-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
transform: rotate(0deg);
transition: transform 60s;
}
.loadingSpinner.start {
transform: rotate(36000deg);
}
Example: https://jsfiddle.net/6tkf1f95/1/
what about only css solution?
#keyframes spinner {
to {transform: rotate(360deg);}
}
#-webkit-keyframes spinner {
to {-webkit-transform: rotate(360deg);}
}
.spinner {
min-width: 30px;
min-height: 30px;
}
.spinner:before {
content: 'Loading…';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -13px;
margin-left: -13px;
}
.spinner:not(:required):before {
content: '';
border-radius: 50%;
border: 5px solid #ccc;
border-top-color: #03ade0;
animation: spinner .7s linear infinite;
-webkit-animation: spinner .7s linear infinite;
}
<div class="spinner"></div>
You can create an infinite CSS transition using a single CSS Custom Property, the value of which you can update every time the JavaScript transitionend event fires.
In the CSS stylesheet, we can start with the following transform and transition:
transform: var(--rotation);
transition: transform 0.7s linear;
We will need to initialise --rotation, so we can do that at the top of the stylesheet:
:root {
--rotation: rotate(0deg);
}
So far, so good. Now we need a JS function which moves the rotation value up by 360deg every time the transition completes:
const rotateSpinner = () => {
let loadingSpinnerStyles = window.getComputedStyle(loadingSpinner);
let rotation = loadingSpinnerStyles.getPropertyValue('--rotation');
rotation = parseInt(rotation.replace('rotate(', '').replace('deg)', '')) + 360;
rotation = 'rotate(' + rotation + 'deg)';
loadingSpinner.style.setProperty('--rotation', rotation);
}
When we put everything together, we get the working example below.
Working Example:
const loadingSpinner = document.querySelector('.loadingSpinner');
const rotateSpinner = () => {
let loadingSpinnerStyles = window.getComputedStyle(loadingSpinner);
let rotation = loadingSpinnerStyles.getPropertyValue('--rotation');
rotation = parseInt(rotation.replace('rotate(', '').replace('deg)', '')) + 360;
rotation = 'rotate(' + rotation + 'deg)';
loadingSpinner.style.setProperty('--rotation', rotation);
}
loadingSpinner.addEventListener('transitionend', rotateSpinner);
window.addEventListener('load', rotateSpinner);
:root {
--rotation: rotate(0deg);
}
.loadingSpinner {
width: 50px;
height: 50px;
border: 5px solid #3498db;
border-top-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
transform: var(--rotation);
transition: transform 0.7s linear;
}
<div class="loadingSpinner"></div>