I am wondering how I can use the animation-mixer property of the Aframe extras component to pause/play an animation. I currently have a gltf model of a bird in my scene with an animation. What I'd like to do is when the pause button is clicked, a function is issued and the animation will pause, and when the play function is triggered, the animation will continue from where it left off. How can this be done? Current code:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
<script>
function pause() {
//pause the animation
}
function play() {
//play the animation
}</script>
<button onclick="pause()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer;">
Pause
</button>
<button onclick="play()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer; margin-left: 50px;">
play
</button>
<a-scene>
<a-entity gltf-model="https://cdn.glitch.global/815f53ca-b7db-40aa-8843-e718abdfbf6d/scene%20-%202022-01-16T183239.246.glb?v=1642386788500" position="20 0 -35" rotation="0 90 0" scale="0.1 0.1 0.1" animation-mixer="clip:Take 001; loop:10000000000000000000; timeScale: 1; crossFadeDuration: 1"></a-entity>
</a-scene>
I read about a possible solution posted on github by donmccurdy yet I'm unsure of how I can get this into my code in a way that functions. Link to the post: https://github.com/n5ro/aframe-extras/issues/222
Link to fiddle with code: https://jsfiddle.net/AidanYoung/0eufcg52/7/
Don's solution is based on changing the timeScale which is used as a scaling factor for playback speed (docs):
// grab the entity reference
const el = document.querySelector("a-entity")
// pause - run at 0 speed
el.setAttribute('animation-mixer', {timeScale: 0});
// play - run at normal speed(1)
el.setAttribute('animation-mixer', {timeScale: 1});
Applied to Your code:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
<script>
function pause() {
document.querySelector("a-entity").setAttribute('animation-mixer', {
timeScale: 0
});
}
function play() {
document.querySelector("a-entity").setAttribute('animation-mixer', {
timeScale: 1
});
}
</script>
<button onclick="pause()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer;">
Pause
</button>
<button onclick="play()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer; margin-left: 50px;">
play
</button>
<a-scene>
<a-entity gltf-model="https://cdn.glitch.global/815f53ca-b7db-40aa-8843-e718abdfbf6d/scene%20-%202022-01-16T183239.246.glb?v=1642386788500" position="20 0 -35" rotation="0 90 0" scale="0.1 0.1 0.1" animation-mixer="clip:Take 001; loop:true; timeScale: 1; crossFadeDuration: 1"></a-entity>
</a-scene>
Model by NORBERTO-3D(CC Attribution)
Related
I am making a little game for my website.
I will have a bunch of colourful circles that change colour when you hover but when you click each will disappear.
I have two questions.
1) How can I make some random circle disappear when I press a certain one (I mean I don't wanna to get rid of the one I clicked but instead some other random. Just to train coordination).
2) How can I add timer that will start the moment you click the first item and the moment you click the last one?
and here's the code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://static.jsbin.com/js/render/edit.js?3.35.2"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<title> game no 5 </title>
<style>
.container{
position:absolute;
top:100px;
left:40%;
width:100px;
}
.one{
width:100px;
height:100px;
border-radius:50px;
background:pink;
position: absolute;
}
.two{
width:100px;
height:100px;
border-radius:50px;
background:pink;
position: absolute;
left:100px;
}
.three{
width:100px;
height:100px;
border-radius:50px;
background:pink;
position: absolute;
left:200px;
}
.four{
width:100px;
height:100px;
border-radius:50px;
background:pink;
position:absolute;
top:100px;
}
.five{
width:100px;
height:100px;
border-radius:50px;
background:blue;
position:absolute;
top:100px;
left:100px;
}
.six{
width:100px;
height:100px;
border-radius:50px;
background:pink;
position: absolute;
top:100px;
left:200px;
}
</style>
</script>
</head>
<body>
<div class="container">
<div class="one pop"></div>
<div class="two pop"></div>
<div class="three pop"></div>
<div class="four pop"></div>
<div class="five pop"></div>
<div class="six pop"></div>
</div>
<script>
var safeColors = ['00','33','66','99','cc','ff'];
var rand = function() {
return Math.floor(Math.random()*6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#"+r+g+b;
};
$('.pop').hover(function() {
$('div').each(function() {
$(this).css('background',randomColor());
});
});
$(".pop").click(function(){
$(this).toggle();
});
</script>
</body>
</html>
I'm looking for a solution to add a fadein and fadeout effect to this line of code:
<img src="images/1.jpg" onmouseover="this.src='images/2.jpg'"
onmouseout="this.src='images/1.jpg'" alt="fade_me" />
Does anyone have any simple solutions without this becoming too complex? Thanks!
Well, I don't know about complexity, but this works pretty well.
http://jsfiddle.net/8KFT8/1/
<style>
.container {
position: relative;
}
.container img {
position: absolute;
transition: opacity .5s ease;
}
.container img:hover {
opacity: 0;
}
</style>
<div class="container">
<img src="images/2.jpg"/>
<img src="images/1.jpg"/>
</div>
I'm using a Nivo Slider in a website that uses Ajax to load its content. It saves the user from loading new pages every time they click on a link.
My problem is that when I load the home page initially, the slider works fine; but if I navigate away from that page then back to it, it just has the loading gif on a loop. Can anyone help?
My index.php is this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>I.C.T - St. Patrick's Academy, Lisburn</title>
<script type="text/javascript" src="assets/js/jqmin.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" media="all" />
<script type="text/javascript" src="assets/js/js.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/nivo.css" media="all" />
<script type="text/javascript" src="assets/js/sliderpack.js"></script>
<script type="text/javascript" src="assets/js/slide.js"></script>
</head>
<body>
<div id="wrap">
<div id="head">
<div id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Learn</li>
</ul>
</div>
<img src="assets/images/logo.png" alt="logo" />
</div>
<div id="screen">
<div id="pad"></div>
<div id="cont_wrap">
<div id="cont">
<h2>Home</h2>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="assets/images/slide1.jpg" alt="1" />
<img src="assets/images/slide2.jpg" alt="2" />
<img src="assets/images/slide3.jpg" alt="3" />
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<p align="center"><i>Copyright 2013 - Finbar Maginn - St. Patrick's Academy, Lisburn</i></p>
</div>
</div>
</body>
</html>
(Note that my Nivo Slider initialization is inside slide.js and looks like this:)
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 16, // For slice animations
boxCols: 6, // For box animations
boxRows: 3, // For box animations
animSpeed: 1000, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: false, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
The Ajax jQuery file I'm using is this:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#links li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-3)){
var toLoad = hash+'.php #cont';
$('#cont').load(toLoad)
}
});
$('#links li a').click(function(){
var toLoad = $(this).attr('href')+' #cont';
$('#cont').fadeOut('fast',loadContent);
$('#load').remove();
$('#wrap').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent() {
$('#cont').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#cont').fadeIn('fast',hideLoader('fast'));
}
function hideLoader() {
$('#load').fadeOut('fast');
}
return false;
});
});
And here is my CSS:
body {
font-size:95%;
font-family:georgia;
line-height:1.576;
}
h2 {
padding:0;
margin:0;
}
#wrap {
margin:0 auto;
width:784px;
}
#head {
width:100%;
height:175px;
}
#links {
width:300px;
height:30px;
padding:140px 0 0 0;
float:right;
text-align:right;
}
#links ul {
margin:0;
padding:0;
}
#links ul li {
display:inline;
margin:0 -2px 0 -2px;
}
#links ul li a {
font-size:1em;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-ms-transition: 0.1s;
-o-transition: 0.1s;
text-decoration:none;
color:black;
background:-webkit-linear-gradient(bottom, white, #74b998);
background:-o-linear-gradient(bottom, white, #74b998);
background:-ms-linear-gradient(bottom, white, #74b998);
background:-moz-linear-gradient(bottom, white, #74b998);
padding:3px 5px 3px 5px;
}
#links ul li a:hover {
background:-webkit-linear-gradient(top, white, #74b998);
background:-o-linear-gradient(top, white, #74b998);
background:-ms-linear-gradient(top, white, #74b998);
background:-moz-linear-gradient(top, white, #74b998);
padding:7px 5px 7px 5px;
}
.left {
border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-bottom-left-radius:10px;
-ms-border-bottom-left-radius:10px;
-o-border-bottom-left-radius:10px;
border-top-left-radius:10px;
-webkit-border-top-left-radius:10px;
-moz-border-top-left-radius:10px;
-ms-border-top-left-radius:10px;
-o-border-top-left-radius:10px;
}
.right {
border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-bottom-right-radius:10px;
-ms-border-bottom-right-radius:10px;
-o-border-bottom-right-radius:10px;
border-top-right-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-top-right-radius:10px;
-ms-border-top-right-radius:10px;
-o-border-top-right-radius:10px;
}
.radius {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
}
#screen {
width:100%;
height:480px;
background-image:url(../images/bckgrnd.png);
}
#pad {
width:100%;
height:29px;
}
#cont_wrap {
overflow:auto;
margin:0 auto;
width:724px;
height:335px;
padding: 0 0 0 6px;
}
#load {
display: none;
position: absolute;
top: 150px;
left: 950px;
text-indent: -9999em;
width: 16px;
height: 16px;
background: url(../images/load.gif) no-repeat;
}
#cont {
}
#foot {
width: 100%;
font-size:90%;
color:gray;
}
#slider {
margin: 0 auto;
width: 700px;
height: 273px;
}
.nivoSlider {
position: relative;
background: url(../images/load.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.nivoSlider a {
border: 0;
display: block;
}
This is a newbie question about Kendo UI draggable. I tried to look at their examples but cant really get it.
I want to make a div draggable to another position. When setting this up I can drag the div, but it disappears when released, I want it to stay in the new place. I have tried this but it doesnt work.
$('.draggable').kendoDraggable({
axis: "x",
hint: Hint,
dragstart: DragStart,
drag: Drag,
dragend: DragEnd
});
function Hint (element) {
console.log("hint");
return element;
}
function DragStart(){
console.log("dragstart");
}
function Drag(){
console.log("draging");
}
function DragEnd(event) {
console.log("dragend");
console.log(event.x.location);
$('.draggable').css({'left': event.x.location});
}
I think this is what you want, and I made a Demo for it.
$('.draggable').kendoDraggable({
hint : function (original) {
return original.clone().addClass("ob-clone");
},
dragstart: function (e) {
$(e.target).addClass("ob-hide");
}
});
$('body').kendoDropTarget({
drop: function (e) {
var pos = $(".ob-clone").offset();
$(e.draggable.currentTarget)
.removeClass("ob-hide")
.offset(pos);
}
})
.draggable {
position: absolute;
background: red;
width: 100px;
height: 100px;
vertical-align: middle;
}
.ob-hide {
display: none;
}
.ob-clone {
background: #cccccc;
}
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id="drop" style="position: absolute; width: 100%; height: 100%; border: 2px solid #000000">
<div class="draggable">
Drag 1
</div>
<div class="draggable">
Drag 2
</div>
</div>
jsFiddle: http://jsfiddle.net/Wayou/fjrcw/
Is there any good way to display products on sliding banner in Magento ver 1.6.2.0 ?
I tried but I am facing two problems:
JavaScript conflicts (I used jquery.min.js for banner then after adding to cart, is not working)
I created new attributes for product image but I'm unable to call it on sliding banner.
Try the avalnache theme .
http://fastdivision.com/themes/avalanche/?utm_source=fastdivision.com&utm_medium=blog&utm_content=top-menu&utm_campaign=avalanche
Some really cool features in it.
You can custmise it futher, but is a good starting point.
HTH
create a CMS static block, set his identifier as 'home_slideshow', and paste in it's content:
<script type="text/javascript">
start_slideshow(1, 3, 3000);
function start_slideshow(start_frame, end_frame, delay) {
id = setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slide' + frame, { duration: 1.0 });
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
Effect.Appear('slide' + frame, { duration: 1.0 });
if (delay == 1000) { delay = 3000; }
id = setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay);
})
}
function stop_slideshow() {
clearTimeout(id);
}
</script>
<div id="slideshowhomepage" style="height: 230px; position: relative;" onmouseover="stop_slideshow()" onmouseout="start_slideshow(1, 3, 1000)">
<div id="slide1" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 3; opacity: 1;"><img src="{{skin url='path/to/image1.jpg'}}" border="0" alt="" /></div>
<div id="slide2" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 2; opacity: 0;"><img src="{{skin url='path/to/image2.jpg'}}" border="0" alt="" /></div>
<div id="slide3" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 1; opacity: 0;"><img src="{{skin url='path/to/image3.jpg'}}" border="0" alt="" /></div>
</div>
then edit you're home CMS page and add this block:
{{block type="cms/block" block_id="home_slideshow" template="cms/content.phtml"}}
You can use Nivo Slider (one the most awesome jquery slider) for sliding banner.
If you want an easy way, just creating new group for homepage slider and adding images/slides to it then you can try the following extension for Magento:
http://www.magepsycho.com/jquery-sliders-pro-nivo-slider.html
You just need to add following code in your cms page:
{{block type="jquerysliderspro/slider" identifier="group-identifier-for-homepage-slider"}}
In fact you can use unlimited no of sliders anywhere in frontend.
Cheers