Major Project 2016

First animation and Material design styling

Project link: http://deszsign.com/memoticket/ticket-flexbox-prototype/index.html

Animation used:

transition: 300ms ease-in-out; (for easing of movement )
transform: translateY(-3px); (hover effect to move buttons up 3px)
transform: translateX(3px); (hover effect to move buttons right 3px)

Some shadow color changes had been applied today.

I had to use more shades of orange to achieve desirable soft shadows for hovered buttons.

I also changed background color for right column, and made buttons a bit stretched.

To represent News interactive movements I used SVG

<div id=”expander” class=”box box — expander”>
 <span class=”morph-shape morph-shape — color-4" data-morph-open=”M273,273c0,0–55.8–23–123–23c-78.2,0–123,23–123,23s23–37.7,23–123C50,79.936,27,27,27,27s46,23,124,23
 c85,0,122–23,122–23s-23,38.43–23,123C250,229.646,273,273,273,273z” data-morph-close=”M273,273c0,0–55.8,24–123,24c-78.2,0–123–24–123–24S3,235.3,3,150C3,79.936,27,27,27,27S72,3,150,3 c85,0,123,24,123,24s24,38.43,24,123C297,229.646,273,273,273,273z”>
 <svg width=”100%” height=”100%” viewBox=”0 0 300 300" preserveAspectRatio=”none”>
 <path d=”M273,273c0,0–55.8,0–123,0c-78.2,0–123,0–123,0s0–37.7,0–123c0–70.064,0–123,0–123s45,0,123,0c85,0,123,0,123,0s0,38.43,0,123C273,229.646,273,273,273,273z”/>
 </svg>
 </span>
 <button class=”trigger”><i class=”fa fa-expand”></i><i class=”fa fa-compress”></i></button> 
 </div>

And animation for this SVG via Snap.SVG JavaScript.

http://snapsvg.io/

The tutorial for this animation can be found here:

At the moment only top news box is working properly — it pushes all new down and expand. I made overflow of the span hidden, so we do not see news boxes at the bottom of the screen. I’ll try fix it using this series of tutorials at Tuts+ http://webdesign.tutsplus.com/courses/animating-with-snapsvg because I need to understand how Snap.svg works.

I also need to look throw the documentation for the Snap.svg — http://snapsvg.io/docs/

To undestand code we ahve to analyse it. Let’s have a look:

<div id=”expander” class=”box box — expander”>
 <span class=”morph-shape morph-shape — color-4" data-morph-open=”M273,273c0,0–55.8–23–123–23c-78.2,0–123,23–123,23s23–37.7,23–123C50,79.936,27,27,27,27s46,23,124,23
 c85,0,122–23,122–23s-23,38.43–23,123C250,229.646,273,273,273,273z” data-morph-close=”M273,273c0,0–55.8,24–123,24c-78.2,0–123–24–123–24S3,235.3,3,150C3,79.936,27,27,27,27S72,3,150,3 c85,0,123,24,123,24s24,38.43,24,123C297,229.646,273,273,273,273z”>
 <svg width=”100%” height=”100%” viewBox=”0 0 300 300" preserveAspectRatio=”none”>
 <path d=”M273,273c0,0–55.8,0–123,0c-78.2,0–123,0–123,0s0–37.7,0–123c0–70.064,0–123,0–123s45,0,123,0c85,0,123,0,123,0s0,38.43,0,123C273,229.646,273,273,273,273z”/>
 </svg>
 </span>
 <button class=”trigger”><i class=”fa fa-expand”></i><i class=”fa fa-compress”></i></button
 </div>

We have 4 elements over here — div — container, span — with complex attributes called data-morph-open and data-morph-close, svg — it’s actually an image (rectangle) drown with code, and button which trigger the animation.

Without any CSS this peace of code looks like black rectangle with small unstyled button on the left bottom.

Let’s find out what are viewBox and preserveAspectRatio attributes of our SVG bring to the stage.

http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

viewBox = <min-x> <min-y> <width> <height>
The <min-x> and <min-y> values determine the upper left corner of the viewbox, and the width and height determine the width and height of that viewBox.

In our case viewBox=”0 0 300 300" means that we start draw our rectangle at coordinate Y=0, X=0. Width=300, height=300.

The preserveAspectRatio attribute is used to force a uniform scaling for the purposes of preserving the aspect ratio of a graphic.

preserveAspectRatio attribute help us to preserve the initial size of the SVG or stretch it to fit viewBox size (it happens when we put preserveAspectRatio value to none), it also can make SVg visible or invisible within the canvas.

As we can see those parameters just position SVG. Obviously they do not responsible for animation of the object. So we have to check JavaScript.

JavaScript on the page contains only ones reference to id of our HTML element (<div id=”expander" class=”box box — expander”>)over here:

new SVGExpander( document.getElementById( ‘expander’ ) );

document.getElementById can only has one value, so we can’t add more id values inside the brackets, and we cant use this id multiple times on the page. The only thing we can do is make divs with different ids and provide this function for each id separately:

new SVGExpander( document.getElementById( ‘expander’ ) );
 new SVGExpander( document.getElementById( ‘expander2’) );
 new SVGExpander( document.getElementById( ‘expander3’) );
 new SVGExpander( document.getElementById( ‘expander4’) );
 new SVGExpander( document.getElementById( ‘expander5’) );
 new SVGExpander( document.getElementById( ‘expander6’) );
 new SVGExpander( document.getElementById( ‘expander7’) );
 new SVGExpander( document.getElementById( ‘expander8’) );
 new SVGExpander( document.getElementById( ‘expander9’) );

and now it works!

Next we have to make this list of items scrollable, so we can reach news at the bottom of the list.

To do it I’ve changed the

overflow: hidden;

to

overflow-y: scroll ;
 overflow-x: hidden;

It gave us unstyled vertical scrollbar, and it looks like this now:

We need apply some styling to the scrollbar.

All elements of the scrollbar can be reached via CSS

These are the pseudo elements themselves. The actual parts of the scrollbars.

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }

Now we can style it, and here is the result:

I just quickly applied to all elements the same parameters:

::-webkit-scrollbar {border: 3px solid #FF8A65;
 border-radius:50%;
 background:#FF6E40; }
::-webkit-scrollbar-button {border: 3px solid #FF8A65;
 border-radius:50%;
 background:#FF6E40; }
::-webkit-scrollbar-track { border: 3px solid #FF8A65;
 border-radius:50%;
 background:#FF6E40; }
::-webkit-scrollbar-track-piece {border: 3px solid #FF8A65;
 border-radius:50%;
 background:#FF6E40;}
::-webkit-scrollbar-thumb { border: 3px solid #FF8A65;
 border-radius:50%;
 background:#FF6E40; }
::-webkit-scrollbar-corner {border: 3px solid #FF8A65;
 border-radius:50%;
 background:#FF6E40; }
::-webkit-resizer {border: 3px solid #FF8A65;
 border-radius:50%;
 background:#FF6E40;}

Later on we can change them if needed.

Next step — we should make news to be changed to other information. We call this toggle button — “Updates”, by pressing this button you can change information in the box “news”.

I’m going to use this script to toddle the words “dynamic news” and “tours” be replaced by one other at the same top bar.

I had to adjust this script for our purposes, so I added transform: translateY property for elements:

.m-fadeOut {
 visibility: hidden;
 opacity: 0;
 transition: 300ms ease-in-out;
transform: translateY(30px);
 
}
.m-fadeIn {
 visibility: visible;
 opacity: 1;
 transition: 300ms ease-in-out;
transform: translateY(-20px);
}

It helps to keep words at the same line, without this code words are displayed one under another. I also added transition: 300ms ease-in-out; to make animation smother. I also customized toggle button on the bottom to match our style.

I decided that buttons “Teasers” and “Tours” do not fit into logic of this section and it must be removed from here and appear at the section dedicated to band and albums. At the new section will be only “dynamic news” “current concert” updates. because they are more important for the user at the first screen of the MemoTicket.

Chrome (browser) add blue line to the focused elements on the page, so all <button> elements get it when clicked. To take it away I use this stripe of code:

button#tog:focus{
 outline:0 !important;
 }

If now you press button “updates” it will look the way we want it using our color scheme:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.