ottermannetje
Gebruiker
- Lid geworden
- 20 okt 2012
- Berichten
- 89
hallo iedereen.
ik heb met een uigebreide versie van marquee een soort tekst slider gemaakt. maar nu wil ik dat de tekst wordt gedraait samen met de achtergrond van de tekst maar zonder de gradient.
foto:
voor als je hem zelf even wil proberen dit is de gradient:
de html:
de css
nu heb ik bij de css geprobeerd bij .marquee p
deze code erbij te plakken:
het werkt niet bij .marquee p
maar als ik het bij .marquee plak draait de hele slider dus dat werkt ook niet.
weet iemand de oplossing?
alvast bedankt, Merijn Otterman
ik heb met een uigebreide versie van marquee een soort tekst slider gemaakt. maar nu wil ik dat de tekst wordt gedraait samen met de achtergrond van de tekst maar zonder de gradient.
foto:
voor als je hem zelf even wil proberen dit is de gradient:
de html:
HTML:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>tekst slider</title>
<link rel=stylesheet href=css/styles.css>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section>
<div class="marquee">
<p>dit is test bericht 1</p>
<p>dit is test bericht 2</p>
</div>
</section>
</body>
</html>de css
Code:
html {
background: url(../images/bg-1.png) repeat-y top;
margin:0 0 0 -1px;
padding:0;
width: 100%;
overflow-Y: scroll;
display: block;
}
body {
padding:150px 0 0 0;
margin :0;
display:table;
width:100%;
color:#656565;
font-family: 'Trebuchet MS', sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
text-transform: normal;
}
header{
background: #ffffff;
margin: 0 auto;
min-height:0px;
height: 0px;
width: 1000px;
padding-top: 225px;
}
}
.marquee {
width: 1000px;
height: 200px;
margin: 0px auto;
overflow: hidden;
position: absolute;
-webkit-box-shadow: inset 0px 2px 2px #fff;
box-shadow: inset 0px 3px 20px #fff;
background: #fff url(../images/gradient.png) repeat;
-webkit-animation-name: ‘bg-gradient’;
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
}
.marquee p {
color: #fff;
background: rgb(35, 34, 40);
background: rgba(35, 34, 40, 0.5);
font-size: 30px;
line-height: 30px;
position: absolute;
font-family: Tahoma, Arial, sans-serif;
text-align: center;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
margin-top: 50px;
width: 100%;
height: 40px;
padding-top: 10px;
}
.marquee a {
color: #fff;
font-size: 30px;
line-height: 30px;
position: absolute;
font-family: Tahoma, Arial, sans-serif;
text-align: center;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
text-decoration: underline;
-webkit-transition: background-color 2100ms;
-moz-transition: background-color 2100ms;
-o-transition: background-color 2100ms;
-ms-transition: background-color 2100ms;
transition: background-color 2100ms;
}
.marquee a:hover{
color: #222;
}
.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;
}
@-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 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%);
}
}nu heb ik bij de css geprobeerd bij .marquee p
deze code erbij te plakken:
Code:
display: block;
writing-mode: tb-rl;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand');het werkt niet bij .marquee p
maar als ik het bij .marquee plak draait de hele slider dus dat werkt ook niet.
weet iemand de oplossing?
alvast bedankt, Merijn Otterman
