Skip to main content
A
annabelleb51950212
Participant
February 17, 2017
解決済み

Fade in, then slide to left, then fade in another image

  • February 17, 2017
  • 返信数 2.
  • 1182 ビュー

Hi all,

I'm new to dreamweaver and have only learnt the basics of coding recently and seem to be hitting a brick wall at the moment.

Basically, I am creating a holding page for a website that I'm (trying) to create. 

I would like the logo (which is 50 x 50px and centred in the page) to fade in for about 2 seconds then slide to the left to allow another image (which is 50 x 415px) to fade in while keeping them centred.

It seems I may have been a little over-ambitious given my skillset but now that I've decided on what I want it to do, I feel I would be failing if I didn't learn how to do it!

Any help would be much appreciated!!

このトピックへの返信は締め切られました。
解決に役立った回答 osgood_

Those specification are not very large 50px x 50px. Example below you can play around with. Its not very responsive either.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>Animation</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.holder {

position: relative;

width: 500px;

height: 50px;

}

img {

max-width: 100%;

height: auto;

}

.box_1 {

width: 50px;

height: 50px;

margin: 0 225px;

position: absolute;

animation-name: slideimage;

animation-delay: 3s;

animation-duration: 2s;

animation-iteration-count: 1;

animation-fill-mode: forwards;

}

.box_2 {

width: 448px;

position: absolute;

right: 0;

animation-delay: 12s;

}

.img_1 {

animation-duration: 4s;

animation-name: fadeIn;

display: block;

height: 50px;

}

.img_2 {

animation-duration: 10s;

animation-name: fadeIn2;

background-color: plum;

height: 50px;

}

@keyframes fadeIn {

0% {  opacity: 0;  }

100% {  opacity: 1;  }

}

@keyframes slideimage {

0%   {right:0; top:0;}

100%  {right:225px; top:0;}

}

@keyframes fadeIn2 {

0% {  opacity: 0;  }

50% {  opacity: 0;  }

100% {  opacity: 1;}

}

</style>

</head>

<body>

<div class="holder">

<div class="box_1"><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196982.jpg" class="img_1" />

</div>

<!-- end box_1 -->

<div class="box_2">

<div class="img_2">

<img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196982.jpg" style="height: 50px;" />

</div>

</div>

<!-- end box_2 -->

</div>

<!-- end holder -->

</body>

</html>

返信数 2

O
osgood_解決！
Legend
February 17, 2017

Those specification are not very large 50px x 50px. Example below you can play around with. Its not very responsive either.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>Animation</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.holder {

position: relative;

width: 500px;

height: 50px;

}

img {

max-width: 100%;

height: auto;

}

.box_1 {

width: 50px;

height: 50px;

margin: 0 225px;

position: absolute;

animation-name: slideimage;

animation-delay: 3s;

animation-duration: 2s;

animation-iteration-count: 1;

animation-fill-mode: forwards;

}

.box_2 {

width: 448px;

position: absolute;

right: 0;

animation-delay: 12s;

}

.img_1 {

animation-duration: 4s;

animation-name: fadeIn;

display: block;

height: 50px;

}

.img_2 {

animation-duration: 10s;

animation-name: fadeIn2;

background-color: plum;

height: 50px;

}

@keyframes fadeIn {

0% {  opacity: 0;  }

100% {  opacity: 1;  }

}

@keyframes slideimage {

0%   {right:0; top:0;}

100%  {right:225px; top:0;}

}

@keyframes fadeIn2 {

0% {  opacity: 0;  }

50% {  opacity: 0;  }

100% {  opacity: 1;}

}

</style>

</head>

<body>

<div class="holder">

<div class="box_1"><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196982.jpg" class="img_1" />

</div>

<!-- end box_1 -->

<div class="box_2">

<div class="img_2">

<img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_196982.jpg" style="height: 50px;" />

</div>

</div>

<!-- end box_2 -->

</div>

<!-- end holder -->

</body>

</html>

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
February 17, 2017

You can use CSS to perform those functions.

Have a look at

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
契約条件Accessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices