I'm working on the animation using ScrollMagic and TweenMax.
The animation is that there are four cards are there, while the browser is scrolling down, each card flip one by one.
I've tried using each function to run the animation. but the problem was the triggers are in the same position so that the cards are flipping at the same time and also how to stop scrolling down while 4 cards are flipped?
here is my codepen
https://codepen.io/MachoBoy/pen/yGXNpg
// init scrollMagic
var controller = new ScrollMagic.Controller();
$('.card-wrapper').each(function(index){
//build scene
//console.log(this.children[0]);
var flipCard = TweenMax.to(this.children[index], 1, {rotationY: -180});
var scene = new ScrollMagic.Scene({
triggerElement: this.children,
offset: 400,
duration: 300,
triggerHook: 0.9
}).setClassToggle(this.children[index], 'flipped').addIndicators().setPin('.card-wrapper').setTween(flipCard).addTo(controller);
})
Related
I want to show an image with a frame. Using <a-image> gives me a plane with the image.
<a-box src="path/to/img.jpg> however gives me the image but it's giving me the image 6 times. Is it possible to get the box with am image at the front and any color at all other sides?
I don't know if you can do this with Aframe (I don't think so), but you can do it with Threejs, by making an array of materials that contain a material for each box face, and applying that to the box mesh.
const loadManager = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(loadManager);
const materials = [
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
];
loadManager.onLoad = () => {
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
cubes.push(cube); // add to our list of cubes to rotate
};
you can place this code inside of a custom component that is attached the cube geometry.
Here is the tutorial that the above code was taken from, on threejsfundamentals.
I have created a dice entity from six plane entities. However, when I click and drag the dice entity, instead of moving that dice, only one sided face gets dragged.
This can be tried hands on at link http://shrouded-chamber-73425.herokuapp.com/
Rather than creating a box from six planes, you should create one box and use a material that will render the dice faces for you. You can use three.js CubeTexture:
AFRAME.registerComponent('dice-texture', {
init: function () {
var box = this.el.getOrCreateObject3D('mesh');
var loader = new THREE.CubeTextureLoader();
loader.setPath('/images/diceTextures/');
var textureCube = loader.load([
'1.png', '2.png',
'3.png', '4.png',
'5.png', '6.png'
]);
box.material = new THREE.MeshStandardMaterial({envMap: textureCube);
}
});
<a-entity geometry="primitive: box" dice-texture></a-entity>
Then you can further optimize so that every box shares the same material so you aren't creating a new one each time.
I have a question, wich one have the best performance in webBrowsers?
drawing a canvas with the given url image "context.drawImage(...)" or just using css with "background:url('...')".
(both images filling the entire webPage as a wallpaper)
For big images (wallpapers) who fill the entire page i think it is heavier to load the image with css.
At least for firefox(20+), if you change tabs or minimize the window and go back again to your page (with the background), i can see that the image takes to show again after a half second.
So, i'm asking bc i found a lot of people telling that basic DOM is better.
Code for css:
--html: <body></body>
$('body').css('background',
"url('http://www.iwallscreen.com/stock/city-lights-hd-wallpaper.jpg') repeat fixed 0 0 #000000");
$('body').css('background-size', "100% auto");
Code for canvas:
--html: <canvas id="canvasWall" style="position:fixed;left:0;z-index:-1;"></canvas>
var context = $('#canvasWall')[0].getContext("2d");
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
var img = new Image();
img.src = 'http://www.iwallscreen.com/stock/city-lights-hd-wallpaper.jpg';
img.onload = function() {
context.drawImage(img, 0, 0, window.innerWidth, window.innerHeight);
};
Somehow I can't manage to get an imageview to be on top of a window. This is my code:
var win = Titanium.UI.createWindow();
var startupView = Titanium.UI.createImageView({
image: 'iphone/Default.png',
opacity:1,
zIndex:20
});
var w = Titanium.UI.createWindow({
title:'Menu',
url:'menu.js',
zIndex: 1,
backgroundImage:'ui/bg.gif'
});
w.open();
win.add(startupView);
win.open();
Basically, I am loading something in the background, and upon finish I am fading out the "startupView". When faded out, I want to have the "w" window to be open underneath it.. What am I missing here?
dont add the startupView...
just open the window... then open the startup view... then fade the startupView out when the window is finished loading
i wrote the following code for drawing a rotate rectangle
var s:UIComponent = new UIComponent();
s.graphics.lineStyle(1, 0x0000FF);
s.graphics.drawRect(50, 50, 200, 200);
s.rotation = 30;
template.addChild(s);
where template is a canvas. Its rotate nicely but the problem is the position is not in right place. i.e. it is not in (50,50) after rotate. How can i solve this problem?
Thanks in advance.
What you're seeing is the default rotation around the origin in Flex (in your case the X,Y coordinates of 50,50) I am assuming that you want to rotate around the center (as I recently had to do). There is the jury rig way to do it, by adjusting the origin point based on rotation angle. Then there is the rotate effect:
import mx.effects.Rotate;
var s:UIComponent = new UIComponent();
var rotator:Rotate = new Rotate(s);
s.graphics.lineStyle(1, 0x0000FF);
s.graphics.drawRect(50, 50, 200, 200);
rotator.angleFrom = 0;
rotator.angleTo = 30;
rotator.originX = s.width/2;
rotator.originY = s.height/2;
template.addChild(s);
rotator.play();
Now I've noticed some problems with this that required me to set the width and height of the rotated object again after the play() method, but other than that I get the ideal rotation situation.
Another downside to this is that it's an effect, which means it visually rotates the object. I will post back when I correct that, if you don't want to see the object rotate.
The Answer is duration
just by adding rotator.duration = 1 before play it happens so quick the user won't see it. 1 being 1 millisecond. I tried 0, but that resulted in no rotation occurring. Obviously if you want to see the effect in action you can increase that length of time by using any value in milliseconds.