I'm trying to create a fade in fade out effect to apply on page load and when leaving the page... But I need it to use only css. My boss wants this effect, but i don't want to use javascript (I'm afraid it won't always work, and it is not working properly...)
The javascript for this effect is this, does anybody know how to do this using only css?
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$(".link").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
I think the only possibility is apply css transition via a body class.
<style>
body.hide{
opacity: 0;
}
body.hidefast {
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
opacity: 0;
}
body {
transition:All 2s ease;
-webkit-transition:All 2s ease;
-moz-transition:All 2s ease;
-o-transition:All 2s ease;
opacity: 1;
}
</style>
<body class="hide">
content content
<a class="link" href="http://http://stackoverflow.com/">LINK</a>
<script type="text/javascript">
var linklocation;
$(document).ready(function() {
//$("body").css("display", "none");
//$("body").fadeIn(2000);
$("body").removeClass("hide");
$(".link").click(function(event){
event.preventDefault();
linkLocation = this.href;
//$("body").fadeOut(1000, redirectPage);
$("body").addClass("hidefast");
setTimeout(redirectPage, 1000);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
</body>
Related
I'll start by saying that I'm fairly new to css so pardon me if the answer to my question is obvious. I'm looking to apply an effect to the element(s) that are most centered in the screen. I want the user to scroll down and have photos saturate from gray scale.
Here is the page which I'd like the effect to occur on:
http://evanscottpierce.com/portfolio/
The current desktop behavior is to saturate on hover but obviously this doesn't work for mobile, so I'd like saturation to be triggered by scrolling instead. As you can see below, I just applied the gray scale effect to desktop only until I can get the desired behavior for mobile.
Here is the code I have so far:
#media only screen and (min-width:768px){
.gray-scale-img .rl-gallery {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.gray-scale-img .rl-gallery .rl-gallery-link {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
will-change: filter;
}
.gray-scale-img .rl-gallery .rl-gallery-link:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
}
Thank you in advance!
Using a helper method to select whether or not the css should be applied and then applying that css with class is pretty clean.
// loop to add sample images
let imageCount = 0;
while (imageCount++ < 10) {
$('body').append('<p><img src="https://picsum.photos/200/100?image=' + imageCount + '" alt="sample image" class="gray-scale-img" ></p>');
}
// helper function to check for vertical centering
function isScrolledIntoCenter(elem)
{
var docViewCenter = $(window).scrollTop() + $(window).height() / 2;
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewCenter) && (elemTop <= docViewCenter));
}
// function to toggle .in-color based on visibility
function toggleInColor() {
const images = $('img.gray-scale-img');
images.each(function() {
$(this).toggleClass('in-color',isScrolledIntoCenter(this));
});
}
toggleInColor();
$(window).on('scroll', toggleInColor);
.gray-scale-img {
-webkit-backface-visibility: hidden;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
will-change: filter;
}
.gray-scale-img.in-color {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The simplest way is usages css3 flexbox:
<div class="flex-container">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>
<style type="text/css">
.flex-container {
display:flex;
height: 200px;
align-items: center;
}
</style>
I'd like to animate a list of items. The first should animate with 0ms delay, the second should do the same animation with 50ms delay, third with 100ms delay and so on. The list is dynamic so I won't know the length.
Is this possible? Note: I don't need help with animations / keyframes specifically, but how to use nth-child or nth-of-type (or anything else?) to achieve a progressive animation delay based on relative position between siblings.
I'm using React / SASS / Webpack if that helps. I can use jQuery if necessary but I'd rather avoid it if possible.
Here's an example on how to do something like this with pure CSS.
You can easily alter it to bring it to your needs.
$(document).ready(function() {
$('.myList img').each(function(i){
var item = $(this);
setTimeout(function() {
item.toggleClass('animate');
}, 150*i);
})
});
#keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.myList img {
float: left;
margin: 5px;
visibility: hidden;
}
.myList img.animate {
visibility: visible;
animation: FadeIn 1s linear;
animation-fill-mode:both;
animation-delay: .5s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myList">
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
</div>
I know this question has been asked before but I can't get mine working. I have a javascript array in the head of my html document which makes the images change to the next one in the array, but I can't make transitions work. I've tried using css properties and I've very briefly tried jquery but as I haven't used jquery before I don't know how to do anything with it.
I have this for javascript:
<script type="text/javascript">
image2 =new Array("images/product1_thumb.png", "images/product2_thumb.png", "images/product3_thumb.png"
, "images/product4_thumb.png")
num =0;
imgNum =image2.length;
function rotate()
{
if(document.images)
{
if(num ==imgNum)
{
num = 0;
}
}
document.getElementById('image2').src = image2[num];
num++;
setTimeout("rotate()",4000);
}
</script>
This is the html:
<section id="right">
<img src="images/product1_thumb.png" ID="image2" alt="" title="" />
</section>
And this css is what I've used to try to make the transitions:
#image2{
margin-left:100px;
position:inherit;
-moz-transition: all 2s ease-in-out 2s;
-webkit-transition: all 2s ease-in-out 2s;
transition: all 2s ease-in-out 2s; /* opacity 5s ease-in-out; */
}
#right{
padding-top:10%;
margin-left:70%;
width:30%;
background-image:url('images/watermark50.png');
background-repeat:no-repeat;
background-position:center;
height:100%;
}
#right img{
margin-left: 30%;
}
I'd be grateful for any help but if it uses jquery you'd have to start at the beginning as I have no idea how it works.
I'm creating a form in angularjs in which there are two ngShow for error messages. Now, I want to crossfade these two messages placing them in the same spot. But, i'm not sure how to get it.
Here is the plunker link: http://plnkr.co/edit/EcT2oOmClz65WUgXgG4g?p=preview
I'm using 1.2.4 and linked the ng-animate lib. Right now the animation (fading in/out) is achieved using CSS not JS:
html:
<input type="email"
name="email"
class="form-control"
id="email"
placeholder="Email"
maxlength="100"
title="Company issued email address"
required
ng-class=""
ng-model="user.email"
ng-blur="buyContactForm.email.$blured = true" />
css:
.errAnimate {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
min-height: 22px;
}
.errAnimate.ng-show{
opacity: 1;
}
.errAnimate.ng-show-add, .errAnimate.ng-show-remove {
display:none!important;
}
.errAnimate.ng-hide{
opacity: 0;
}
.errAnimate.ng-hide-add, .errAnimate.ng-hide-remove {
display:block!important;
}
JS:
myApp.controller('myCtrl', function($scope){
$scope.user={
email: ''
};
$scope.showFieldError = function(formField, error, blured){
if(blured){
return formField.$error[error] && !formField.$pristine && formField.$blured;
}else{
return formField.$error[error] && !formField.$pristine;
}
};
// set live validation function for view load mode
$scope.showError = $scope.showFieldError;
});
The way you can do it is by adding position: absolute to the container's style, like this:
.errAnimate {
position: absolute;
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
min-height: 22px;
}
This will make both errors have the same position while fading, and thus overlapping (which is what I think you mean by crossfading)
I also had to change the width of the container because its width was making the error messages span several lines.
Here is a link to the edited plunker
I am trying to build a slideshow using AngularJS, like this http://caroufredsel.dev7studios.com/ the one with arrows (next and prev).
here is the HTML code:
<div class="carousel">
<div class="left"><input type="button" value="Back" ng-click="slideBack()" ng-disabled="currentSlide == 0" /></div>
<div class="content">
<div class = "slide" ng-repeat="img in imgs | startFrom:currentSlide | limitTo:slidesSize" ng-animate="{enter: 'animate-enter', leave: 'animate-leave', move: 'animate-move'}">
<img ng-src="{{img.url}}" />
</div>
</div>
<div class="right"><input type="button" value="Next" ng-click="slideNext()" ng-disabled="currentSlide+slidesSize >= imgs.length" /></div>
</div>
CSS:
.animate-enter, .animate-move, .animate-leave
{
-webkit-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.animate-enter {
left: 400px;
position:relative;
opacity: 0;
}
.animate-enter.animate-enter-active {
left: 0px;
opacity: 1;
}
.animate-move {
position:relative;
}
.animate-move.animate-move-active{
left: -200px;
}
.animate-leave {
left: 0;
}
.animate-leave.animate-leave-active{
left: -100%;
position:absolute;
}
Here is the Filter:
angular.module('carouselFilters', []).filter('startFrom', function() {
return function(input, start) {
start = +start;
return input.slice(start);
}
});
Controller:
function carouselCtrl($scope, $http) {
$scope.currentSlide = 0;
$scope.slidesSize = 3;
$http.get('carousel_images.json').success(function(data) {
$scope.imgs = data;
});
$scope.slideNext = function(){
$scope.currentSlide++;
}
$scope.slideBack = function(){
$scope.currentSlide--;
}
}
The animate-enter and animate-leave work properly, but the animate-move doesn't work, any idea ?
Thanks.
enter for when a DOM element is added into the repeat list.
leave for when a DOM element is removed from the repeat list.
move for when a DOM element is moved from one position in the repeat list to another position.
I started from an example from nganimate.org.
There is a list of items under ng-repeat
line 21: <li ng-animate="'animate'" ng-repeat="name in names | filter:search">
Under style.css I just used the same css that you did.
I created a simple button that would shuffle the li's around using _.shuffle and it does the animation you described.
<button ng-click="shuffle()">Shuffle the List</button>
I think its more that you are adding/removing to the repeat list and not actually moving elements? Hope that makes sense.
Sorry it saved the wrong one - http://plnkr.co/edit/ZXkwx7Skuy42ndWexMt0