here is a good example with jquery but it is not valid jQuery for AMP
$(document).ready(function() {
try {
var ticker_holder = $('.ticker-holder').get(0);
var ticker_text = $('.ticker').get(0);
var ticker_pos = ticker_text.parentNode.offsetWidth;
var ticker_data = $(ticker_holder).html();
$(ticker_text).parent().html('<marquee scrollamount="10" scrolldelay="">' + ticker_data + '</marquee>');
$('.emergencyalert').hover(
function() {
$('marquee', this).get(0).stop();
}, function() {
$('marquee', this).get(0).start();
});
}
catch (o) {}
});
Is there any component in AMP to do something like that?
<marquee> element was removed from HTML5. I suggest you can achieve marquee effect from css animations. AMP doesn't have any such component which has functionality like marquee. Here is code i tested in AMP playground and adds marquee like effect. You can modify it further to achieve exact same effect you looking for.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-autocomplete/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>amp-autocomplete</title>
<style amp-custom>
.wrap{
position: relative;
}
.ul-list{
list-style: none;
}
.li-list{
display: inline-block;
padding: 1em 2em;
font-size: 1.2em;
}
.spot-anim {
position: absolute;
right: -1em;
transform: translateX(-100%);
will-change: transform;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: marquee;
-moz-animation: marquee;
-o-animation-name: marquee;
animation-name: marquee;
}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<div class="wrap">
<ul class="ul-list spot-anim">
<li class="li-list"> News number 1</li>
<li class="li-list"> News number 2</li>
<li class="li-list"> News number 3</li>
<li class="li-list"> News number 4</li>
</ul>
</div>
<style amp-keyframes>
#keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-150%);
}
}
</style>
</body></html>
You may also use amp-script with layout="fixed-height" here to achieve same animations with stop functionality on mouse over event with javascript.
Related
I am trying to create an accelerated mobile page(AMP) using Javascript.
The AMP validator shows an error called "Custom JavaScript is not allowed".
I have tried below code.
<!doctype html>
<html amp>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="amp-script-src" content="sha384-vk5WoKIaW_vJyUAd9n_wmopsmNhiy-L2Z-SBxGYnUkunIxVxAv_UtMOhba_xskxh">
<title>Document</title>
<link rel="canonical" href="/" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
</head>
<body>
<amp-script script="local-script">
<button>Hello amp-script!</button>
</amp-script>
<script target="amp-script" type="text/plain" id="local-script">
console.log('js added')
</script>
</body>
</html>
I need to find some possible solution to work AMP with Javascript.
The AMP validator needs to be clean as it shows 1 error "Custom JavaScript is not allowed" which I am unable to find the cause from the above code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.container{
height: 2000px;
background:green;
padding:10px;
}
.btn{
position:fixed;
top:50%;
right:-50%;
transition:all 600ms ease-out;
}
.slideIn{
animation: 600ms ease-in 0s slideIn;
animation-fill-mode: forwards;
}
.slideOut{
animation: 600ms ease-out 0s slideOut;
animation-fill-mode: forwards;
}
#keyframes slideIn {
from{
right:-50%;
}
to{
right:0%;
}
}
#keyframes slideOut {
from{
right:0%;
}
to{
right:-50%;
}
}
</style>
</head>
<body>
<div id="container" class="container">
<div style="height: 200px;background:red;"></div>
<div style="height: 200px;background:yellow;"></div>
<div id="someEle" style="height: 200px;background:blue;"></div>
<div style="height: 200px;background:red;"></div>
<div style="height: 200px;background:yellow;"></div>
</div>
<button id="btn" class="btn">GET API ACCESS</button>
<script>
function init(){
var parent = document.getElementById("container");
window.addEventListener('scroll',function(e){
var parentScrollHeight = parent.scrollHeight;
var parentScrollTop = document.documentElement.scrollTop;
var startPoint = (parentScrollHeight/100) * 10;
var endPoint = (parentScrollHeight/100) * 70;
console.log(parentScrollTop,startPoint,endPoint)
try{
var ele = document.getElementById("btn");
if(parentScrollTop > startPoint && parentScrollTop < endPoint){
console.log("added")
ele.classList.add("slideIn");
}else{
console.log("removed");
ele.classList.remove("slideIn");
}
}catch(e){
console.log(e);
}
});
}
init();
</script>
</body>
</html>
how to slide in and slide out a button while scrolling a page. slide in is working slide out not working.
you should add animation for btn
css
.btn{
position:fixed;
top:50%;
right:-50%;
transition:all 600ms ease-out;
animation: 600ms ease-out 0s slideOut;
animation-fill-mode: forwards;
}
I'm having a slight problem with css transition. On my website, I have a div, and in that div is a h1.
Here's the css code.
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
transition: font-size 1s linear;
opacity: 1;
transition: opacity 1s linear;
}
I want to animate the opacity (from 0.5 to 1) and font-size (from 10px to 50px).
However, when I hover my mouse over that div, the opacity is nicely transitioned, but the text just changes the size instantly. So the hover seems to work and change the font-size, why is transition omitted?
If I make it #inner1 h1:hover, the transition works properly but only when I hover over the text. And I want the font-size transition when I hover over that div.
I tried to work around the problem and write a JS script for enlarging the text.
Here's what I came up with. I'll paste all the HTML content as well since there's not much of it.
However, this is not really smooth, I've gone as far as to incrementing only 0.09px every millisecond, but it still looks bumpy and also sends hundreds of unnecessary commands to the browser, right?
How can I solve that problem? Either with CSS or JS?
Thanks in advance ;).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
<script>
var JSinner1 = document.getElementById("inner1");
var JSastroh1 = document.getElementById("astro-h1")
JSastroh1.style.fontSize = "16px";
var textBigger = function() {
var newSize = parseFloat(JSastroh1.style.fontSize) + 0.009 + "px";
window.setInterval(textBigger, 1)
if (parseFloat(newSize) < 60) {
JSastroh1.style.fontSize = newSize;
console.log(newSize);
}
}
JSinner1.addEventListener("mouseover", textBigger)
</script>
</body>
</html>
You're overwriting one transition with another. Try with
transition: font-size 1s linear,opacity 1s linear;
It's very simple, the problem is your :hoverselector, as you are adding two transitions properties, the last one is overwriting the previous one. In order to make this work, just add this to that rule:
transition: opacity 1s linear, font-size 1s linear;
Or you can use
transition: all 1s linear;
instead of using
transition: font-size 1s linear;
transition: opacity 1s linear;
use all
transition: all 1s linear;
or merge the two into one transition: font-size 1s linear,opacity 1s linear;
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
transition: all 1s linear;
}
<div id="inner1">
<h1> Some text </h1>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
transition: opacity 1s linear, font-size 1s linear;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
</body>
</html>
I am trying to show a css animation when hovering on nav li a. So far I have tried several different examples on how to show and hide information from different elements but can get mine to work. Here is the CSS and HTMl, I do not provide any jS or jQuery since I could get any to work but below you have a jsfiddle ready to go. All help highly appreciated.
.box {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff
}
#-webkit-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-moz-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-o-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
<nav class="nav">
<ul>
<li class="navLink">Home</li>
<li class="navLink">Away</li>
</ul>
</nav>
<div class="box">this should show only when hovering li element</div>
FIDDLE
You can use jQuery to trigger the CSS3 animation with a class change :
DEMO
CSS :
.box {
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff;
height:0;
}
.box.show {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
height:35px;
}
#-webkit-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-moz-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-o-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
jQuery :
$('nav li a').hover(function () {
$('.box').toggleClass('show');
});
You can try this jQuery. You just have to modify it to your needs... but this should get you started.
$(".navLink").mouseenter(function(){
$(".box").css("visibility", "visible")
});
$(".navLink").mouseleave(function(){
$(".box").css("visibility", "hidden")
});
If you put this in your javascript part in jsFiddle, it works.
You have to add style for div box as
<div class="box" style="display:none">
and add following javascript code:
$(document).ready(function(){
$(".navLink").hover(function(){
$(".box").toggle();
});
});
See the updated fiddle: Updated fiddle
There you go :). assumes jquery is up and running!
$(document).ready(function() {
var divToShow = $('.box');
var links = $('.navLink');
var fadeDuration = 500;
//initial hiding of div
divToShow.hide();
//add listener when mouse enters hover-state on link
links.mouseenter(function() {
//stop animation if there is one
divToShow.stop();
//fade it in
divToShow.fadeIn();
});
//add listener for when mouse leaves link
links.mouseleave(function() {
//stop animation if there is one
divToShow.stop();
//fade it out
divToShow.fadeOut();
});
});
this initially hides your div and fades it in and out when hovered. Compared to the other solutions this also takes care of switching from hovering from one link to another without appruptly changing the animation. totally smooth... ;)
Just select jQuery 2.1 and paste this in you jsFiddle...should work immediately!
Im trying to get an animation to trigger when I update the elements class via javascript. The intention is for this to be part of a PhoneGap app so -webkit- prefixes should do the job to my knowledge.
Anyhow, the animations are currently not working when I'm testing in Chrome, both when on the element alone as well on the new class. Can anybody explain where I'm going wrong here?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSockets</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" onclick="document.getElementById('ani1').className = 'bounce fade';">
Start
</a>
<div id="ani"></div>
</body>
</html>
style.css
#-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(50px);
}
20%, 60% {
-webkit-transform: translateY(70px);
}
80%, 40% {
-webkit-transform: translateY(30px);
}
}
#ani {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background: red;
-webkit-transform: all 0.1s;
-webkit-animation: 'bounce' 1s 'ease-in-out';
-webkit-animation-iteration-count: 3;
-webkit-animation-delay: 2s;
}
#ani.bounce{
-webkit-animation: 'bounce' 1s 'ease-in-out';
-webkit-animation-iteration-count: 3;
}
#ani.fade{
-webkit-transition: opacity 0.4s linear;
-webkit-animation-delay: 3s;
}
There are two problems. First there is a typo in your inline Javascript: getElementById('ani1'). There is a "1" appended at the id.
The second thing is that you have to remove the quotes in the -webkit-animation statements.
Incorrect:
-webkit-animation: 'bounce' 1s 'ease-in-out';
Correct:
-webkit-animation: bounce 1s ease-in-out;
If you fix that, it should work ;-)