WebSVN – lars-tiefland.marine-sales.de – Blame – /trunk/resources/views/anim.tpl

Revision	Autor	Zeilennr.	Zeile
2	lars	1	`<style>`
		2	`.pinselstrich {`
		3	`background: url(/images/webelemente/pinselstrich_nebensonne.png);`
		4	`background-repeat: repeat;`
		5	`background-size: auto;`
		6	`background-size: cover;`
		7	`color: #fff;`
		8
		9	`width: 76%;`
		10	`min-height: 138px;`
		11	`background-repeat: no-repeat;`
		12	`font-size: 1.2em;`
		13	`font-family: noticia_textbold;`
		14	`}`
		15	`.pinselstrich p {`
		16	`width: 68%;`
		17	`margin: 0 auto;`
		18	`padding-top: 9%;`
		19	`}`
		20
		21
		22	`.anim_section {`
		23	`clear:both;`
		24	`float:none;`
		25	`}`
		26	`.flex {`
		27	`display:flex;`
		28	`flex-wrap: wrap;`
		29	`flex-direction: row;`
		30	`}`
		31	`.anim_info {`
		32	`width:50%;`
		33	`padding:5%;`
		34	`padding-top:19vh;`
		35	`}`
		36	`.anim_info h1 {`
		37	`font-size:2.4em;`
		38	`color:#2FBABD;`
		39	`}`
		40	`.anim_info h2 {`
		41	`color:#3A3B3D;`
		42	`margin-bottom:20px;`
		43	`}`
		44	`.anim_buttons {`
		45	`margin-top:20px;`
		46	`display:flex;`
		47	`gap:20px;`
		48	`justify-content:center;`
		49	`width:calc(100% - 40px);`
		50	`}`
		51	`.anim_buttons > div {`
		52	`transition:all 200ms ease;`
		53	`background-color:#C8D2DC;`
		54	`color:#3A3B3D;`
		55	`border-radius:15px;`
		56	`padding:3%;`
		57	`font-family:noticia_textbold;`
		58	`cursor:pointer;`
		59	`width: 23%;`
		60	`text-align: center;`
		61	`display:flex;`
		62	`align-items:center;`
		63	`justify-content:center;`
		64	`}`
		65	`.anim_btn01:hover,`
		66	`.anim_btn01:focus {`
		67	`background-color:#FF8DCC!important;`
		68	`}`
		69	`.anim_btn02:hover,`
		70	`.anim_btn02:focus {`
		71	`background-color:#2FBABD!important;`
		72	`}`
		73	`.anim_btn03:hover,`
		74	`.anim_btn03:focus {`
		75	`background-color:#FFE993!important;`
		76	`}`
		77
		78	`.anim_btn01 {`
		79	`border:2px solid #EA5802;`
		80	`}`
		81	`.anim_btn02 {`
		82	`border:2px solid #0E2E7B;`
		83	`}`
		84	`.anim_btn03 {`
		85	`border:2px solid #FED639;`
		86	`}`
		87
		88	`#anim {`
		89	`display:none;`
		90	`clear:both;`
		91	`}`
		92
		93	`.anim {`
		94	`display: flex;`
		95	`align-items: center;`
		96	`justify-content: center;`
		97	`margin:5% auto;`
		98	`min-height:500px;`
		99	`margin:3% auto;`
		100	`width:40%;`
		101	`}`
		102	`.anim #kreis_hell {`
		103	`display:block;`
		104	`animation: pulse 5s infinite;`
		105	`position:absolute;`
		106	`transform: scale(1);`
		107	`animation: kreis_hell 1.6s ease-in-out;`
		108	`-webkit-animation: kreis_hell 1.6s ease-in-out;`
		109	`background:transparent!important;`
		110	`}`
		111	`.anim #kreis_dunkel {`
		112	`display:block;`
		113	`animation: pulse 5s infinite;`
		114	`position:absolute;`
		115	`transform: scale(1);`
		116	`animation: kreis_dunkel 1.3s ease-in-out;`
		117	`-webkit-animation: kreis_dunkel 1.3s ease-in-out;`
		118	`background:transparent!important;`
		119	`}`
		120	`.anim #flasche {`
		121	`display:block;`
		122	`opacity:1;`
		123	`position:absolute;`
		124	`margin-top:0%;`
		125	`animation: flasche 1.6s ease-in-out;`
		126	`-webkit-animation: flasche 1.6s ease-in-out;`
		127	`background:transparent!important;`
		128	`}`
		129	`.anim #waschcreme {`
		130	`display:block;`
		131	`position:absolute;`
		132	`margin-left: 22%;`
		133	`margin-top:20%;`
		134	`transform: scale(1);`
		135	`animation: waschcreme 1.8s ease-in-out;`
		136	`-webkit-animation: waschcreme 1.8s ease-in-out;`
		137	`background:transparent!important;`
		138	`}`
		139	`.anim #schwamm {`
		140	`display:block;`
		141	`opacity:1;`
		142	`position:absolute;`
		143	`transform: scale(1);`
		144	`margin-top:29%;`
		145	`margin-right:20%;`
		146	`animation: schwamm 2s ease-in-out;`
		147	`-webkit-animation: schwamm 2s ease-in-out;`
		148	`background:transparent!important;`
		149	`}`
		150	`.anim .pulse1 {`
		151	`animation:pulse 200ms ease-in-out;`
		152	`}`
		153	`.anim .pulse2 {`
		154	`animation:pulse 400ms ease-in-out;`
		155	`}`
		156
		157	`@keyframes kreis_hell {`
		158	`0% {`
		159	`transform: scale(0);`
		160	`-webkit-transform: scale(0);`
		161	`}`
		162	`40% {`
		163	`transform: scale(1.2);`
		164	`-webkit-transform: scale(1.2);`
		165	`}`
		166	`100% {`
		167	`transform: scale(1.0);`
		168	`-webkit-transform: scale(1.0);`
		169	`}`
		170	`}`
		171
		172	`@keyframes kreis_dunkel {`
		173	`0% {`
		174	`transform: scale(0);`
		175	`-webkit-transform: scale(0);`
		176	`}`
		177	`10% {`
		178	`transform: scale(0);`
		179	`-webkit-transform: scale(0);`
		180	`}`
		181	`50% {`
		182	`transform: scale(.5);`
		183	`-webkit-transform: scale(.5);`
		184	`}`
		185	`100% {`
		186	`transform: scale(1);`
		187	`-webkit-transform: scale(1);`
		188	`}`
		189	`}`
		190
		191	`@keyframes flasche {`
		192	`0% {`
		193	`opacity:0;`
		194	`margin-top:0%;`
		195	`transform: scale(0);`
		196	`-webkit-transform: scale(0);`
		197	`}`
		198	`50% {`
		199	`opacity:1;`
		200	`}`
		201	`60% {`
		202	`transform: scale(1.3);`
		203	`-webkit-transform: scale(1.3);`
		204	`}`
		205	`70% {`
		206	`transform: scale(.9);`
		207	`-webkit-transform: scale(.9);`
		208	`}`
		209
		210	`100% {`
		211	`opacity:1;`
		212	`margin-top:0%;`
		213	`transform: scale(1);`
		214	`-webkit-transform: scale(1);`
		215	`}`
		216	`}`
		217
		218	`@keyframes waschcreme {`
		219	`0% {`
		220	`opacity:0;`
		221	`margin-left:0;`
		222	`transform: scale(0);`
		223	`-webkit-transform: scale(0);`
		224	`}`
		225	`25% {`
		226	`transform: scale(0);`
		227	`-webkit-transform: scale(0);`
		228
		229	`}`
		230	`50% {`
		231	`opacity:1;`
		232	`}`
		233	`60% {`
		234	`transform: scale(1.2);`
		235	`-webkit-transform: scale(1.2);`
		236	`}`
		237
		238	`100% {`
		239	`opacity:1;`
		240	`margin-left:22%;`
		241	`transform: scale(1);`
		242	`-webkit-transform: scale(1);`
		243	`}`
		244	`}`
		245
		246	`@keyframes schwamm {`
		247	`0% {`
		248	`opacity:0;`
		249	`margin-right:0;`
		250	`margin-top:0;`
		251	`transform: scale(0);`
		252	`-webkit-transform: scale(0);`
		253	`}`
		254	`25% {`
		255	`transform: scale(0);`
		256	`-webkit-transform: scale(0);`
		257
		258	`}`
		259	`50% {`
		260	`opacity:1;`
		261	`}`
		262	`60% {`
		263	`transform: scale(1.2);`
		264	`-webkit-transform: scale(1.2);`
		265	`}`
		266
		267	`100% {`
		268	`opacity:1;`
		269	`margin-top:29%;`
		270	`margin-right:20%;`
		271
		272	`transform: scale(1);`
		273	`-webkit-transform: scale(1);`
		274	`}`
		275	`}`
		276
		277	`@keyframes pulse1 {`
		278	`0% {`
		279	`transform: scale(1);`
		280	`}`
		281	`100% {`
		282	`transform: scale(.95);`
		283	`}`
		284	`}`
		285	`@keyframes pulse2 {`
		286	`0% {`
		287	`transform: scale(1);`
		288	`}`
		289	`30% {`
		290	`transform: scale(1);`
		291	`}`
		292
		293	`100% {`
		294	`transform: scale(.9);`
		295	`}`
		296	`}`
		297
		298	`@media screen and (max-width:900px) {`
		299	`.pinselstrich {`
		300	`width:100%;`
		301	`}`
		302	`.pinselstrich p {`
		303	`padding-left: 33%;`
		304	`}`
		305	`.flex {`
		306	`flex-direction:column-reverse;`
		307	`}`
		308	`.anim_info {`
		309	`padding-top:2vh;`
		310	`}`
		311	`.anim_info,`
		312	`.anim {`
		313	`width:95%;`
		314	`}`
		315	`.anim {`
		316	`margin:3% 0;`
		317	`}`
		318	`#kreis_dunkel {`
		319	`width:85%;`
		320	`}`
		321	`#waschcreme {`
		322	`margin-top:59%!important;`
		323	`margin-left:58%!important;`
		324	`}`
		325	`#schwamm {`
		326	`margin-top: 95%!important;`
		327	`margin-right: 44%!important;`
		328	`}`
		329
		330	`@keyframes waschcreme {`
		331	`0% {`
		332	`opacity:0;`
		333	`margin-left:0;`
		334	`transform: scale(0);`
		335	`-webkit-transform: scale(0);`
		336	`}`
		337	`25% {`
		338	`transform: scale(0);`
		339	`-webkit-transform: scale(0);`
		340
		341	`}`
		342	`50% {`
		343	`opacity:1;`
		344	`}`
		345	`60% {`
		346	`transform: scale(1.2);`
		347	`-webkit-transform: scale(1.2);`
		348	`}`
		349
		350	`100% {`
		351	`margin-left:58%;`
		352	`margin-top:59%;`
		353	`transform: scale(1);`
		354	`-webkit-transform: scale(1);`
		355	`}`
		356	`}`
		357
		358	`@keyframes schwamm {`
		359	`0% {`
		360	`opacity:0;`
		361	`margin-right:0;`
		362	`margin-top:0;`
		363	`transform: scale(0);`
		364	`-webkit-transform: scale(0);`
		365	`}`
		366	`25% {`
		367	`transform: scale(0);`
		368	`-webkit-transform: scale(0);`
		369
		370	`}`
		371	`50% {`
		372	`opacity:1;`
		373	`}`
		374	`60% {`
		375	`transform: scale(1.2);`
		376	`-webkit-transform: scale(1.2);`
		377	`}`
		378
		379	`100% {`
		380	`opacity:1;`
		381	`margin-top:95%;`
		382	`margin-right:44%;`
		383
		384	`transform: scale(1);`
		385	`-webkit-transform: scale(1);`
		386	`}`
		387	`}`
		388
		389	`}`
		390
		391	`</style>`
		392
		393	`<section class="anim_section">`
		394	`<div class="inner flex">`
		395	`<div class="anim_info">`
		396	`<h1>Perlglanz - Unser Original</h1>`
		397	`<h2>Qualität seit 1980</h2>`
		398
		399	`<div class="pinselstrich">`
		400	`<p>Wir sind die Marke für Menschen, die auf Qualität vertrauen.</p>`
		401	`</div>`
		402
		403	`{*`
		404	`<div class="anim_buttons">`
		405	`<div onclick="window.location.href='/4-Bad-WC/';" class="anim_btn01">Bad & WC</div>`
		406	`<div onclick="window.location.href='/3-Kueche-Haushalt/';"class="anim_btn02">Küche & Haushalt</div>`
		407	`<div onclick="window.location.href='/5-Spar-Sets/';" class="anim_btn03">Spar-Sets</div>`
		408	`</div>`
		409	`*}`
		410
		411	`</div>`
		412
		413	`<div class="" id="anim">`
		414	`<img id="kreis_hell" class="pulse1" src="/images/animation/kreis_55transparenz.png">`
		415	`<img id="kreis_dunkel" class="pulse2" src="/images/animation/kreis_full.png">`
		416	`<img id="flasche" src="/images/animation/flasche1.png">`
		417	`<img id="waschcreme" src="/images/animation/waschcreme.png">`
		418	`<img id="schwamm" src="/images/animation/schwamm1.png">`
		419	`</div>`
		420	`</div>`
		421	`</section>`
		422
		423	`<script>`
		424	`$(document).ready(function() {`
		425	`animCSS();`
		426	`$(window).scroll(function() {`
		427	`animCSS();`
		428	`});`
		429	`});`
		430
		431	`function animCSS() {`
		432	`let animPos = $('.anim_section').offset();`
		433	`animPos = animPos.top;`
		434
		435	`let animH = $('#anim').height();`
		436	`let screenH = $(window).height();`
		437	`let scrollPos = 0;`
		438	`scrollPos = window.scrollY;`
		439
		440	`if((scrollPos+animH) > animPos) {`
		441	`setTimeout(function() {`
		442	`$('#anim').css("display","flex");`
		443	`$('#anim').addClass('anim');`
		444	`}, 600);`
		445	`}`
		446	`}`
		447
		448	`</script>`
		449
		450
		451
		452
		453
		454
		455
		456
		457
		458
		459
		460
		461
		462
		463
		464
		465
		466
		467
		468

Subversion-Projekte lars-tiefland.marine-sales.de

(root)/trunk/resources/views/anim.tpl – Revision 2