CSS3 Marquee Effect - в тупик
Я прошел через бесконечное количество решений, касающихся эффекта выделения, и я совершенно ошеломлен. Я также попробовал несколько примеров webkit, но демоверсии, которые он демонстрирует, не работают. Я использую в основном Chrome, но мой сайт должен работать как в Chrome, так и в Firefox.
http://jsfiddle.net/Birdieasm/LYZ2J/
<body>
<div id="mainCon">
<p class="style">VAULT ORIENTATION DATES</p>
<div id="mar">
<marquee width="295px" height="140px" direction="UP" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();"><p>April 14th, 2014 @ 6:00pm - Washington Vault</p>
<a href="#">Washington State Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>May 22nd, 2014 @ 6:00pm - California Vault</p>
<a href="#">Anaheim Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>June 3rd, 2014 @ 6:00pm - New York Vault</p>
<a href="#">Empire Expo Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>July 19th, 2014 @ 6:00pm - District of Columbia</p>
<a href="#">Walter E. Washington Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>August 21st, 2014 @ 6:00pm - Ohio Vault</p>
<a href="#">SeaGate Centre</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>September 30th, 2014 @ 6:00pm - Michigan Vault</p>
<a href="#">DeVos Place Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>October 10th, 2014 @ 6:00pm - Nevada Vault</p>
<a href="#">MGM Grand Hotel and Casino</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>November 12th, 2014 @ 6:00pm - Alabama Vault</p>
<a href="#">Celebration Arena</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>December 26th, 2014 @ 6:00pm - Connecticut Vault</p>
<a href="#">XL Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>Janrury 3rd, 2015 @ 6:00pm - Florida Vault</p>
<a href="#">Tampa Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>February 5th, 2015 @ 6:00pm - Illinois Vault</p>
<a href="#">Oakley-Lindsay Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>March 17th, 2015 @ 6:00pm - Indiana Vault</p>
<a href="#">Indiana Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</marquee>
</div>
</div>
</body>
@charset "utf-8";
/* CSS Document */
#mainCon {
width:935px;
margin-left: auto;
margin-right: auto;
}
#mar {
margin-left: 5px;
border: thin solid #000;
width: 285px;
height: 140px;
background: url(../images/vaultdates.jpg);
}
marquee {
font-size: 8.5px;
font-family: Verdana, sans-serif;
}
marquee a {
color:#03C;
text-decoration:none;
}
marquee a:hover {
font-style:italic;
}
marquee p {
font-weight: bold;
}
Я вижу, что все эти шатры идут слева направо или справа налево. Я хочу, чтобы мой пошел снизу вверх. Я пробовал анимацию webkit, я очень мало знаю о JavaScript и плагинах, поэтому я действительно не хочу идти по этому пути.
Я пробовал бесчисленное множество других сайтов.
Единственное, что мне удалось сделать, - это свойство анимации, но я очень мало знаю об этом свойстве.
Нижняя анимация - это эффект, который я желаю, но он замедляется, и я хочу, чтобы он был такой же скорости, как эффект, который я уже создал. Я изо всех сил пытаюсь воссоздать этот эффект.: http://jsfiddle.net/Birdieasm/Lam3C/
<body>
<div class="wrapper">
<h1>Marquee with CSS3 Animation</h1>
<h3>Move the text Downwards</h3>
<div class="marquee down">
<p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">How to add WordPress Related Posts Without Plugins</a></p>
<p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Automate Your Dropbox Files With Actions</a></p>
</div>
<h3>Move the text Upwards</h3>
<div class="marquee up">
<p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">How to add WordPress Related Posts Without Plugins</a></p>
<p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Automate Your Dropbox Files With Actions</a></p>
</div>
</div>
</body>
html {
background: url('../images/skewed_print.png');
}
h1, h2, h3 {
font-family: Tahoma, Arial, sans-serif;
color: #fff;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
a {
color: #00b1dc;
text-decoration: none;
}
a:hover {
color: #0097bc;
}
.wrapper {
width: 500px;
margin: 25px auto;
}
.marquee {
width: 500px;
height: 50px;
margin: 25px auto;
overflow: hidden;
position: relative;
border: 1px solid #000;
background-color: #222;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
-webkit-transition: background-color 350ms;
-moz-transition: background-color 350ms;
transition: background-color 350ms;
}
.marquee p {
position: absolute;
font-family: Tahoma, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
transform:translateX(100%);
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
}
.marquee p:nth-child(1) {
animation: left-one 20s ease infinite;
-moz-animation: left-one 20s ease infinite;
-webkit-animation: left-one 20s ease infinite;
}
.marquee p:nth-child(2) {
animation: left-two 20s ease infinite;
-moz-animation: left-two 20s ease infinite;
-webkit-animation: left-two 20s ease infinite;
}
.marquee.down p {
transform:translateY(-100%);
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
}
.marquee.down p:nth-child(1) {
animation: down-one 20s ease infinite;
-moz-animation: down-one 20s ease infinite;
-webkit-animation: down-one 20s ease infinite;
}
.marquee.down p:nth-child(2) {
animation: down-two 20s ease infinite;
-moz-animation: down-two 20s ease infinite;
-webkit-animation: down-two 20s ease infinite;
}
.marquee.up p {
transform:translateY(100%);
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
}
.marquee.up p:nth-child(1) {
animation: up-one 20s ease infinite;
-moz-animation: up-one 20s ease infinite;
-webkit-animation: up-one 20s ease infinite;
}
.marquee.up p:nth-child(2) {
animation: up-two 20s ease infinite;
-moz-animation: up-two 20s ease infinite;
-webkit-animation: up-two 20s ease infinite;
}
/*================================
Move the Marquee to the Left
==================================*/
/** Mozilla Firefox Keyframes **/
@-moz-keyframes left-one {
0% {
-moz-transform:translateX(100%);
}
10% {
-moz-transform:translateX(0);
}
40% {
-moz-transform:translateX(0);
}
50% {
-moz-transform:translateX(-100%);
}
100%{
-moz-transform:translateX(-100%);
}
}
@-moz-keyframes left-two {
0% {
-moz-transform:translateX(100%);
}
50% {
-moz-transform:translateX(100%);
}
60% {
-moz-transform:translateX(0);
}
90% {
-moz-transform:translateX(0);
}
100%{
-moz-transform:translateX(-100%);
}
}
/** Webkit Keyframes **/
@-webkit-keyframes left-one {
0% {
-webkit-transform:translateX(100%);
}
10% {
-webkit-transform:translateX(0);
}
40% {
-webkit-transform:translateX(0);
}
50% {
-webkit-transform:translateX(-100%);
}
100%{
-webkit-transform:translateX(-100%);
}
}
@-webkit-keyframes left-two {
0% {
-webkit-transform:translateX(100%);
}
50% {
-webkit-transform:translateX(100%);
}
60% {
-webkit-transform:translateX(0);
}
90% {
-webkit-transform:translateX(0);
}
100%{
-webkit-transform:translateX(-100%);
}
}
/*================================
Move the Marquee Downwards
==================================*/
/** Mozilla Firefox Keyframes **/
@-moz-keyframes down-one {
0% {
-moz-transform:translateY(-100%);
}
10% {
-moz-transform:translateY(0);
}
40% {
-moz-transform:translateY(0);
}
50% {
-moz-transform:translateY(100%);
}
100%{
-moz-transform:translateY(100%);
}
}
@-moz-keyframes down-two {
0% {
-moz-transform:translateY(-100%);
}
50% {
-moz-transform:translateY(-100%);
}
60% {
-moz-transform:translateY(0);
}
90% {
-moz-transform:translateY(0);
}
100%{
-moz-transform:translateY(100%);
}
}
/** Webkit Keyframes **/
@-webkit-keyframes down-one {
0% {
-webkit-transform:translateY(-100%);
}
10% {
-webkit-transform:translateY(0);
}
40% {
-webkit-transform:translateY(0);
}
50% {
-webkit-transform:translateY(100%);
}
100%{
-webkit-transform:translateY(100%);
}
}
@-webkit-keyframes down-two {
0% {
-webkit-transform:translateY(-100%);
}
50% {
-webkit-transform:translateY(-100%);
}
60% {
-webkit-transform:translateY(0);
}
90% {
-webkit-transform:translateY(0);
}
100%{
-webkit-transform:translateY(100%);
}
}
/*================================
Move the Marquee Upwards
==================================*/
/** Mozilla Firefox Keyframes **/
@-moz-keyframes up-one {
0% {
-moz-transform:translateY(100%);
}
10% {
-moz-transform:translateY(0);
}
40% {
-moz-transform:translateY(0);
}
50% {
-moz-transform:translateY(-100%);
}
100%{
-moz-transform:translateY(-100%);
}
}
@-moz-keyframes up-two {
0% {
-moz-transform:translateY(100%);
}
50% {
-moz-transform:translateY(100%);
}
60% {
-moz-transform:translateY(0);
}
90% {
-moz-transform:translateY(0);
}
100%{
-moz-transform:translateY(-100%);
}
}
/** Webkit Keyframes **/
@-webkit-keyframes up-one {
0% {
-webkit-transform:translateY(100%);
}
10% {
-webkit-transform:translateY(0);
}
40% {
-webkit-transform:translateY(0);
}
50% {
-webkit-transform:translateY(-100%);
}
100%{
-webkit-transform:translateY(-100%);
}
}
@-webkit-keyframes up-two {
0% {
-webkit-transform:translateY(100%);
}
50% {
-webkit-transform:translateY(100%);
}
60% {
-webkit-transform:translateY(0);
}
90% {
-webkit-transform:translateY(0);
}
100%{
-webkit-transform:translateY(-100%);
}
}
Мне нужна моя страница для проверки, так как в настоящее время ее нет.:(
1 ответ
Попробуйте, это прекрасно работает для меня, это работает вниз, но если вы хотите, чтобы оно пошло вверх, просто поменяйте местами 100% и 0% и измените настройку на нужную, если вам нужна помощь с настройками. Google, настройка и w3schools объяснят, как использовать эту настройку.
для этого вам не нужно выделять только класс div или идентификатор с содержимым, которое вы хотите выделить внутри, и поменяйте его соответствующим образом, если вы точно объясните мне, что вы хотите переместить, и где я буду стараться, если вам будет проще
#marquee_div_name {
display:block;
width: 500px;
position:absolute;
text-align: center;
animation-name: marquee;
-webkit-animation-name: marquee;
animation-duration: 60s;
-webkit-animation-duration: 60s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count:infinite;
animation-direction:normal;
-webkit-animation-direction:normal;
}
@keyframes marquee {
from { top: 0%; }
to { top: 100%; }
}
}
@-webkit-keyframes marquee {
from {top: 0%;}
to {top: 100%;}
}