Sticky Footer Animation
i made blank website template(html5) in dreamweaver cs6 start with, following smooth scroll tutorial https://www.youtube.com/watch?v=ohhpyklmc94, added sticky footer- "back top". fine.
then wanted add bouncing animation on footer in edge animate. firstly, footer stuck top; but animation worked.
secondly, went "title_edgepreload.js" , changed positions in .js absolute fixed, did in dreamweaver other links. made footer stick bottom of page, , did not stick screen animation worked.
if cut out part between <!--adobe edge runtime--> , <!--adobe edge runtime end-->,
works without animation.
any ideas how can make sticky, or there way animate it?
<!doctype html>
<!doctype html>
<html>
<style type="text/css">
#apdiv1 {
position: absolute;
width: 800px;
height: 115px;
z-index: 1;
top:50%;
left:50%;
margin-right: auto;
margin-left: auto;
}
</style>
<head>
<meta charset="utf-8">
<title>untitled document</title>
<style type="text/css">
body{
margin:0;
font: 40px tahoma, geneva, sans-serif
}
section {
background-color: #999;
display: block;
height: 2000px;
padding: 0px;
padding-left: 120px
}
#one{
background: #ffca1f;
color: #fff;
}
#two{
background: #12b100;
color: #fff;
}
#three{
background: #71300d;
color: #fff;
}
#four{
background: #ff0000;
color: #fff;
}
nav{
position:fixed;
}
nav {
font-size: 12px;
color: #fff;
background-color: #000;
text-align: center;
display: block;
margin: 3px;
padding: 10px;
}
nav1 {
position:fixed;
font-size: 12px;
color: #999999;
background-color: #f93;
text-align: center;
display: block;
margin: 0px;
padding: 10px;
bottom: 0px;
width: 100%;
}
.colour {
color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function filterpath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-za-z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationpath = filterpath(location.pathname);
var scrollelem = scrollableelement('html', 'body');
$('a[href*=#]').each(function() {
var thispath = filterpath(this.pathname) || locationpath;
if ( locationpath == thispath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetoffset = $target.offset().top;
$(this).click(function(event) {
event.preventdefault();
$(scrollelem).animate({scrolltop: targetoffset}, 400, function() {
location.hash = target;
});
});
}
}
});
// use first element "scrollable"
function scrollableelement(els) {
(var = 0, arglength = arguments.length; <arglength; i++) {
var el = arguments[i],
$scrollelement = $(el);
if ($scrollelement.scrolltop()> 0) {
return el;
} else {
$scrollelement.scrolltop(1);
var isscrollable = $scrollelement.scrolltop()> 0;
$scrollelement.scrolltop(0);
if (isscrollable) {
return el;
}
}
}
return [];
}
});
</script>
<!--adobe edge runtime-->
<script type="text/javascript" charset="utf-8" src="testscroll_edgepreload.js"></script>
<style>
.edgeload-edge-14016602 {
visibility: visible;
font-size: 12px;
padding: 10px;
position: fixed;
margin: 0px auto;
display: block;
bottom: 0px;
}
img { display: block; }
</style>
<!--adobe edge runtime end-->
</head>
<body>
<nav><a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
<a href="#four">four</a>
</nav>
<nav1 class="edgeload-edge-12552702 edgeload-edge-14266872 edgeload-edge-14016602">
<a href="#title" class="colour edgeload-edge-14016602">back top</a></nav1>
<section id="one">
<div>
<div align="centre"><img src="images/fifa-2018_02.gif" alt="" name="title" width="800" height="232" id="title" align="absmiddle"></div>
</div>
</section>
<a href="#four"></a>
<section id="two">page2</section>
<section id="three">page3</section>
<section id="four">page4</section>
</body>
</html>
More discussions in Animation tips and tricks
adobe
Comments
Post a Comment