ART370 Spring 2015

Wednesday, April 29, 2015

Adding multiple Carousel Sliders to parallax scrolling

For additional carousel sliders used in parallax scrolling files, following the following instructions

You can find a copy of example files this a dropbox folder https://www.dropbox.com/s/neq9z416bgmxo6x/Parallax%20Slider%20Combo%20Multi.zip?dl=0

1. First add the code to create another carousel slider. It will look the same just as the first one, but the id name for the container div should be different for purposes of affecting position and such

<div id="sec5”><!—this id name is used in css to control positioning, 100% width—>



<div id="da-slider5" class="da-slider sec5”><!—here you should change the id and class name as this id name is needed to control this new slider specifically—>





<div class="da-slide">

<h2>Slide 1 Title</h2>

<p>Fusce tempor viverra mi ac pellentesque. Integer nec pretium leo. Fusce iaculis malesuada viverra. Ut ornare aliquam orci, id adipiscing nisi convallis ac. Vestibulum scelerisque, velit ut commodo tincidunt, dolor nisi congue turpis, id lobortis nunc tortor et quam. Mauris commodo quam at enim sodales, quis fringilla velit rutrum. Quisque malesuada arcu mi, ut auctor nisi molestie non.</p>

<div class="da-img"><img src="images/2.png" alt="image01" /></div>

</div>





<div class="da-slide">

<h2>Slide 2 Title</h2>

<p>Fusce tempor viverra mi ac pellentesque. Integer nec pretium leo. Fusce iaculis malesuada viverra. Ut ornare aliquam orci, id adipiscing nisi convallis ac. Vestibulum scelerisque, velit ut commodo tincidunt, dolor nisi congue turpis, id lobortis nunc tortor et quam. Mauris commodo quam at enim sodales, quis fringilla velit rutrum. Quisque malesuada arcu mi, ut auctor nisi molestie non.</p>

<div class="da-img"><img src="images/3.png" alt="image01" /></div>

</div>





<div class="da-slide">

<h2>Slide 3 Title</h2>

<p>Fusce tempor viverra mi ac pellentesque. Integer nec pretium leo. Fusce iaculis malesuada viverra. Ut ornare aliquam orci, id adipiscing nisi convallis ac. Vestibulum scelerisque, velit ut commodo tincidunt, dolor nisi congue turpis, id lobortis nunc tortor et quam. Mauris commodo quam at enim sodales, quis fringilla velit rutrum. Quisque malesuada arcu mi, ut auctor nisi molestie non.</p>

<div class="da-img"><img src="images/1.png" alt="image01" /></div>

</div>





<div class="da-slide">

<h2>Slide 4 Title</h2>

<p>Fusce tempor viverra mi ac pellentesque. Integer nec pretium leo. Fusce iaculis malesuada viverra. Ut ornare aliquam orci, id adipiscing nisi convallis ac. Vestibulum scelerisque, velit ut commodo tincidunt, dolor nisi congue turpis, id lobortis nunc tortor et quam. Mauris commodo quam at enim sodales, quis fringilla velit rutrum. Quisque malesuada arcu mi, ut auctor nisi molestie non.</p>

<div class="da-img"><img src="images/4.png" alt="image01" /></div>

</div>





<nav class="da-arrows">

<span class="da-arrows-prev"></span>

<span class="da-arrows-next"></span>

</nav>



</div>



</div>

</div>

2. At the bottom of the html document, where the last javascript code is before the closing body tag, you want to include an additional function that will control the animation of the slider (i have highlighted this is red, basically update the id name

<script type="text/javascript">

$(function() {

$('#da-slider').cslider({

bgincrement : 0

});

$('#da-slider5').cslider({

bgincrement : 0

});

});

</script>

3. In the style2.css file, be sure to copy the previous .da-slider css rule and duplicate it with the exact same properties and vaues, and just update this additional css rule with your new slider name from the html code

.da-slider5{

width: 100%;

/*min-width: 520px;*/

height: 400px;

position: relative;

/*margin: 30px auto;*/

margin: 0px auto;

overflow: hidden;

background:#ffcc00;

/*background: transparent url(../images/waves.gif) repeat 0% 0%;*/

border-top: 8px solid #efc34a;

border-bottom: 8px solid #efc34a;

box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;

-webkit-transition: background-position 1s ease-out 0.3s;

-moz-transition: background-position 1s ease-out 0.3s;

-o-transition: background-position 1s ease-out 0.3s;

-ms-transition: background-position 1s ease-out 0.3s;

transition: background-position 1s ease-out 0.3s;

}

4. Also be sure in your parallax css file the css rule that affects the placement of this slider should also have a property and value of width:100%, as leaving this property and value out can make the content invisible

#sec5 {

position: absolute;

top: 5500px;

z-index:10;

width:100%;

}

Tuesday, April 28, 2015

Week 15 Day 1- April 28, Tuesday - Homework

Final critique for both intermediate and advanced section scheduled for Thursday, May 7 at 8:30am.

Thursday, April 16, 2015

Week 13 Day 2 - Thursday, April 16 - Homework

Intermediate Section

1. Begin coding and development of Project 2. Final critique scheduled for 3 weeks, Thursday, May 7. This will also be the final class meeting (no class during Finals week).

Advanced Section

1. Continue to work on Term project development. Final term project critique scheduled for Tuesday, May 5. Additional prototyping and user feedback testing for some projects may take place in Ridenbaugh Gallery during finals week (May 11-15)

Week 13 Day 2 - Thursday, April 16 - Homework

Tuesday, April 7, 2015

Week 12 Day 1 + 2- Tuesday/Thursday April 7+9 - Homework

Intermediate Section

1. Continue to work on Project 2 designs and midpoint presentations. Midpoint presentation critique is schedule for next Tuesday, April 14, 8:30am.

Final project 2 critique scheduled for Thursday, May 7. This will also be the final class meeting (no class during Finals week)

Advanced Section

Wednesday, April 1, 2015

Week 11, March 31 thru April 2- Homework

Intermediate Section

1. Begin working on design components for Project 2.

Next deadline for Proj 2 is scheduled for Tuesday, April 14 at 8:30am. Each student/group will need to present a Design Ideation Presentation (template provided on dropbox>Intermediate>Templates). Refer to template comments to guide you in what needs to be presented on April 14.

Overall, as you begin to design your project keep the following questions in mind:

What is (Graphic/Communication) Design?
Why does Design matter?
How does design make an impact on daily life?
What are additional resources that you can encourage the target audience to seek out: How to learn more about design? Organizations for designers? Schools/Academic programs that teach design? The industry leading design studios/firms, types of design occupations etc.

Many of you are using the familiarity of other disciplines of design as a model or metaphor for communication design, however be sure your project solutions will clarify what communication design is and how it makes an impact in life for all

2. Wireframes and flowcharts due for Project 2. These will be review at start of next class. You should also have an outline put together regarding the information that will drive your website content.

Advanced Section

1. We will meet in class Thursday, April 2 at 8:30am, then head over to the Ridenbaugh gallery to critique and discuss Rachael Studebaker's term project. Following this critique, we will return to AAS and discuss further developments in regards to term project progress.